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


Looking to shortlist some headless content management systems? Our comprehensive list will help you narrow down the growing headless CMS landscape.

We are excited to announce big updates to the new Cosmic dashboard including webhooks, smart views, bulk edit, and more!

We're excited to announce big updates to the new dashboard.

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?

Both Gatsby and Next.js are among the most popular frameworks for websites and online applications. In this article, we’re going to compare Gatsby vs. Next.js to help you choose the right framework for your next web project. We’ll talk about how they handle data and render static websites.

2021 was a big year for Cosmic and we are pumped for what 2022 will bring. Here's a list of some of the things that we achieved over the past 12 months

Get Started with Cosmic

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