May 20, 2021

Navigation as Structured Content

By Lauren Etheridge

In this guide, we will use an array schema type of references to build a small navigation structure that can be used to create a menu on the front-end of a website or application.

Prerequisites

  • Sanity project
  • Knowledge of structured content and custom schemas
  • Code editor of your choice

To follow along, you will need an existing Sanity studio project or you can go Sanity create to use a starter project.

Creating a small navigation structure

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.',
      },
   ],
};

Navigation as an array of references

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.

The mainNav reference array creates a dropdown list of the pages and posts that have been created.

That array of references allows you to add multiples pages, products, or other content as a main menu item.

Query the reference navigation

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.

λ npm install -g @sanity/cli
λ sanity init
Get started for free

Other guides by author

Creating a navigation schema

How to build a navigation schema that will allow multiple navigations for any type of content.

Lauren Etheridge
Go to Creating a navigation schema