The new Cosmic dashboard is here!
Test drive it now →

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


Introducing Merge Requests, a huge leap forward for content management that brings the power of Git to your content workflows.

We are excited to announce our new podcast: Build Time, now available on your favorite content platforms.

GraphQL vs. ReST - which works better for your application? This article compares similarities and key differences, and provides considerations for when to choose one or the other.

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?

What should you be thinking about when hunting for a future-proof CMS? We've listed every consideration your organization will need when it comes to choosing a Modern CMS.

After months of painstaking design, development, and testing, we are excited to announce the release of the new Cosmic Dashboard! We have rebuilt the dashboard from the ground up and you can now be one of the first to test it in a private alpha release.

Get started with Cosmic

Personal projects are free. Scale up as you grow.
Start building Talk to sales