Cosmic Blog How to Create an Intuitive Website Navigation Menu

How to Create an Intuitive Website Navigation Menu

by Tony Spiro on September 14, 2016

In my previous post, Building with the Content Editor in Mind, I talked about how to best split up the content of a web page to be easily managed by a content editor.  In this article, I’m going to show you how to create an easy-to-manage website navigation menu using the powerful Cosmic JS Metafields.

Cosmic JS Metafields were designed partly with navigation in mind because navigation needs to be both flexible and nestable.  Cosmic JS Metafields allows you to create nestable data structures with parent / child relationships easily with a simple drag and drop in the CMS.  And the output from the Cosmic JS API makes building and managing a navigation menu for your website easier than ever.

Real (Estate) World Example



  • Let's take a look at the Real Estate Website available in the Cosmic JS Websites and Apps page.  This website includes the following nav items:

    • 1. Home
      2. About
    3. Property Types - (Includes nested menu items in a dropdown)
    -- Residential
  • -- Commercial
  • 4. Listings
  • ...etc

You can see we have two levels of navigation, a main level: Home, About, Property Types, Listings and a nested nav level: Residential and Commercial, child elements that belong to the Property Types main nav menu item.  If you've ever had to build a navigation menu like this and make it easily managed for a content editor in a CMS, you know that it is challenging.  But Cosmic JS has made this once challenging, time-consuming task easy to implement in any website codebase and intuitive to manage in the Cosmic JS CMS API.

Metafields to the Rescue

Let's now go step-by-step to create an easily managed, nested navigation menu, like the Real Estate Website navigation.  Login to follow along.

First we will create a new bucket (or use an existing bucket) then add an Object Type to store our navigation and other global elements which we will call Globals.


Next let's create a new object within our Global object type titled appropriately: Nav.

Since we will only be using the Metfields in this object, let's remove the Content editor in Nav by editing the Object Settings > Visibility Settings.

Now let's begin building our navigation.  First let's create a new Metafield for each Nav item on the first level.  This includes: Home, About, Property Types, Listings, etc.  Each Metafield value field will be the link that we want to navigate to.  (Home will go to "/", About to "/about" etc...)


Now the fun part, let's create our nested navigation beneath our Property Types main nav item.  To do this, create a new Metafield and drag it under the Property Types nav item.  You can nest the secondary nav item beneath any main nav item creating the parent / child relationship which we will use later when we retrieve our content from the API.

Our new navigation menu now looks like the following:

To see how easy it will be to add the navigation to our codebase,  let's look at the API endpoint of our nav object.

Notice that the nav object includes our menu items as a simple array of Metafields.  And Property Types has an additional array of children which store our sub navigation items.  For a developer, this is huge because it takes this once complex task of nested, managed navigation items and breaks it down into a simple parent / child relationship.  This makes implementation much easier.


Also, notice that the visual structure of the Metafields in the editor and the visual data structure in the JSON API are practically identical!

I hope you have enjoyed this article on how to easily build a website navigation using Cosmic JS Metafields.  If you have any comments or questions, please reach out to Cosmic JS on Twitter and join our Slack Community.

You may also like


In this installment of the Cosmic JS Developer Spotlight Series, we sat down with Raymond Camden, a Senior Software Engineer and Developer Advocate residing in Lafayette, Louisiana. Raymond has extensive experience in the technology space, having enjoyed stints at IBM, Adobe and AuthO prior to becoming a Senior Engineer for Developer Experience at American Express. Follow Raymond on Twitter, GitHub or LinkedIn, and enjoy the Q/A.

In this installment of the Cosmic JS Developer Spotlight Series, we sat down with Jason Lengstorf, a developer, architect, keynote speaker and occasional designer residing in Portland, Oregon. Having worked previously at IBM and Precision Nutrition, Jason now serves as Head of Developer Relations at Gatsby. Follow Jason on Twitter, LinkedIn or GitHub, and enjoy the Q/A.

The Cosmic Community focuses on providing helpful resources to equip developers and content creators with the inspiration and know-how to build apps faster, together. In this installment of the Cosmic JS Developer Spotlight Series, we sat down with Quincy Larson, the developer and famed teacher behind freeCodeCamp.org. Follow Quincy on Twitter, Medium, GitHub or LinkedIn, and enjoy the Q/A.

In this installment of the Cosmic JS Developer Spotlight Series, we sat down with John Leider, the founder of Vuetify who recently spoke at the Cosmic JS Vuetiful Holiday Meetup following his presentation at VueConf in Toronto. To see the slides from the Vuetiful Meetup Presentation "The Path to Vuetify 2.0", you can click here. Otherwise, follow John on Twitter, LinkedIn or GitHub, and enjoy the Q/A.

As a developer, getting a CMS set up for your content creators requires a certain level of empathy. It's your job to make a technology choice that allows them to work in a comfortable environment and only see what they need to get their job done.

In this installment of the Cosmic JS Developer Spotlight Series, we sat down with Ali Spittel, a Software Engineer and Developer Advocate residing in Washington, DC. Ali was most recently Lead Instructor at General Assembly prior to scaling back her course schedule to accept a position as Software Engineer and Dev Advocate at DEV Community. When she's not busy teaching or leading the front-end charge at DEV Community, she's directing the DC Chapter of WomenWhoCode. Follow Ali on Twitter or her DEV Community profile and enjoy the Q/A.

Ready to Get Started?

No payment info required.
Start Now   Contact Sales