How to Create an Intuitive Website Navigation Menu

Cosmic Blog
Cosmic Blog 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 Metafields.

Cosmic Metafields were designed partly with navigation in mind because navigation needs to be both flexible and nestable.  Cosmic 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 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 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 has made this once challenging, time-consuming task easy to implement in any website codebase and intuitive to manage in the Cosmic 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 Metafields.  If you have any comments or questions, please reach out to Cosmic on Twitter and join our Slack Community.

You may also like


In this installment of the Cosmic 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.

In this installment of the Cosmic Developer Spotlight Series, we sat down with Jacob Knaack, a Web Developer and Technical Communicator residing in Seattle, Washington. Jacob is a Front End Developer at restack, a development studio that finely crafts websites and apps. Jacob is also a frequent contributor to the Cosmic Community, having recently built both the Progressive Apollo Blog as well as the Gatsby Documentation Website. Follow Jacob on LinkedIn and GitHub and enjoy the conversation.

Is it time to give REST a rest? GraphQL is a language and database agnostic querying language that might just leave RESt in its dust.

In this episode of the Cosmic Developer Spotlight Series, we chatted with Lydia Hallie, remote software developer and active contributor on Dev.to. She has been getting a lot of attention for her easy-to-follow (and beautifully visual!) educational resources for JavaScript. Follow Lydia on Twitter, GitHub, LinkedIn, and enjoy the conversation.

Why are so many businesses looking beyond WordPress and other traditional CMSes for powering their digital content? What really is a headless CMS? And how does it work? Find out in this primer on headless CMSes.

We released our additional users Add-on a few weeks ago and it has become one of the most popular products. We think customers really like the flexibility it gives their team to upgrade just a portion of their usage plan instead of jumping up to the next plan. With that flexibility in mind, we are happy to offer two more add-ons to help you get the most out of Cosmic while allowing more billing flexibility.

Ready to Get Started?

Build personal projects for free. Add your team at unbeatable prices.
Start Now Contact Sales