Cosmic JS Blog Stay tuned for community news, company announcements and updates from the Cosmic JS team.

How to Create an Intuitive Website Navigation Menu


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


The golden triangle of project success or failure rests on the three angles of A) Speed B) Quality C) Cost. When it comes to interactive agencies, they may be promising (at best) two of the three triangle points, but how likely are they to fulfill that promise?

In this Spotlight we are focusing on Jon Bloomer, who recently launched the Cosmic JS-powered website for his business Tone Temple.  Jon took some time to answer a few questions about his business, his development process and some of his favorite non-dev rockstars.

We are happy to announce that you can now add automatically backup your Buckets via the Automatic Daily Backups Add-on.  To add the peace of mind of daily Backups, go to Your Bucket Dashboard > Settings > Backups.

Using Cosmic JS, Express, Stripe, and React, we've built both a monetizable blog that lets our readers subscribe to read premium content and a convenient dashboard to view data about our blog. We've integrated Stripe for secure payments and we've built an app that does as much as we want it to do with room to grow.

Cosmic JS has an understandable hierarchy for content management and can be used as a stand-alone content organizer while a website is being built. Buckets, Object Types, Metafields and Files can act as a sitemap or content portal for a team wanting to organize information more effectively during the development process.  And when the site is ready for development and launch, the API is ready to begin delivering the pre-populated content saving time and money.

I've been thinking a lot about what makes a great product / UI / feature set.  I've narrowed it down to two words: 

Beautifully easy.

I also keep coming back to the idea of user empathy.  Whenever I hit a road block in trying to do something with Cosmic JS, I make a note of it and try to tear down the road block.  I've noticed that when I come back to the place where the roadblock was and find a nice bridge, I'm a happier user.  And I think in software development that's the highest goal you can attain.