Navigation as Structured Content

Navigation is one of the main content components of a website or application. It helps provide directions to end-users as well as provides a topic summary of the content available. You can create a navigation structure using an array of references for pages, products, or any type of content desired.

To get started, you will need to make a page document type in studio/schemas located in the studio directory of your Sanity project. Your page.js file can contain any schema types needed to create your page content.

// Create the Page document 
// Location: /schemas/page.js

export default {
  name: 'page',
  title: 'Page',
  type: 'document',
  fields: [
    {
      name: 'title',
      title: 'Title',
      type: 'string',
    },
    {
      name: 'slug',
      title: 'Slug',
      type: 'slug',
      options: {
        source: 'title',
      },
    },
    {
      name: 'mainImage',
      title: 'Main image',
      type: 'image',
      options: {
        hotspot: true,
      },
    },
    {
      name: 'body',
      title: 'Body',
      type: 'blockContent',
    },
  ],

  preview: {
    select: {
      title: 'title',
      media: 'mainImage',
    },
  },
}

You will also need to create a siteConfig.js document type in the studio/schemas located in the studio directory of your Sanity project.

export default {
    name: 'siteConfig',
    type: 'document',
    title: 'Site Settings',
    fields: [
      {
        name: 'title',
        type: 'string',
        title: 'Site title',
      },
      {
        title: 'URL',
        name: 'url',
        type: 'url',
        description: 'The main site url.',
      },
   ],
};

After you have created a siteConfig "singleton" and used the structure builder to customize and organize document workflows inside of Sanity studio, you are ready to add an array schema type to your siteConfig.js file. The array schema type will contain an array of references to the pages and/or posts of your site. References allow you to connect or reference other documents. The navigation reference field will live in the site settings document type that can act as a central location to put all global settings and configurations for your website.

// Add mainNav array of page references to siteConfig.js
{
title: 'Main Navigation',
name: 'mainNav',
description: 'Select pages for the top menu',
type: 'array',
of: [
  {
    type: 'reference',
    to: [{ type: 'page' }],
  },
},

Let's talk about what is happening in this code. The type array makes an array of the documents you want to reference. In this case, there will be a reference array of the pages from the page document. Inside the studio, the mainNav field you created will have an Add button that will show a dropdown list of all pages that you can select to create a navigation menu. The array of references can also be used to add multiple document types at the same time. So, it is possible to create to: [{ type: 'page' },{ type: 'post' }], . In this case, the mainNav references array would contain all of the pages and posts that have been created in the studio.

Once you add pages to the navigation reference field in the Site Settings document, you can query the reference navigation in GROQ using array transversal [] and the dereferencing operator —>.

//GROQ
*[_type == "siteConfig"]{
  mainNav[]->{ 
    _id,
    slug,
		title
  }
}

The above query tells Sanity that we want to follow the reference and to give us the content of the document referenced. The output received from the query will bring back a JSON object that contains the ID, slug, and title from the mainNav array using the content from the page document:

//JSON output from GROQ
[
  {},
  {
    "mainNav": {
      "_id": "86026996-067d-4644-a909-12f72762eade",
      "slug": {
        "_type": "slug",
        "current": "home"
      },
      "title": "Home"
    }
  }
]

The navigation structure that references the page document can be rendered on the front-end using HTML/JSX, React, Next.js, or virtually any front-end tool you prefer. In part 2, we will build a more robust navigation structure that will allow for the creation of multiple menus.

Sanity Composable Content Cloud is the headless CMS that gives you (and your team) a content backend to drive websites and applications with modern tooling. It offers a real-time editing environment for content creators that’s easy to configure but designed to be customized with JavaScript and React when needed. With the hosted document store, you query content freely and easily integrate with any framework or data source to distribute and enrich content.

Sanity scales from weekend projects to enterprise needs and is used by companies like Puma, AT&T, Burger King, Tata, and Figma.