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


At Cosmic, it's our mission to help teams of developers and content creators build great content-powered apps together. We're happy to announce the new Additional Users Add-On to offer a flexible pricing option for growing teams.

We're excited to announce some big updates to our branding and website design. We have now changed our name to Cosmic. By dropping the JS from our name, we intend to not only be the best CMS for JavaScript developers, but also for developers using any programming language.

Jamstack is the newest stack innovation, and it's kicking old school app development to the curb. What's the Jamstack? How can you start using it?

Static sites are in the middle of a comeback - in this article, we cover everything you need to know about static site generators.

We believe headless is positioned to dominate the CMS market in the next decade. How so? Take a peek into our insights.

In this installment of the Cosmic Developer Spotlight Series, we sat down with Sumit Kharche, a Full Stack Software Developer residing in Pune, India. Submit is an active member of the Cosmic Community, having recently built the new React Static Blog, which is available in the Cosmic Apps Marketplace. With more community projects on the way, we're excited to interview one of our own for this Spotlight. šŸ˜Ž Follow Sumit on Twitter, LinkedIn and GitHub, and enjoy the conversation.

Get Started with Cosmic

Build personal projects for free. Add your team at unbeatable prices.
Start Building Talk to Sales