Here's a quick summary of everything we released in Q1 2024.

Hygraph
Docs

Sectioned navigation

#Overview

This guide shows how to build a sectioned navigation using enumerations and nested components.

Our sectioned navigation will be a content model containing an ID, nested components for sections and navigation items, and a dropdown to select styling options. This way, to create a navigation using this configuration, you can create a content entry with its own ID, and as many navigation items as you need.

This navigation model is a good choice for large projects where you need to group your navigation items into clusters or specific subjects.

Sectioned navigationSectioned navigation

#Core concepts

In this guide, you'll work with enumerations, references, components and basic component fields. Let's look into these concepts:

  • Enumerations: an enumeration is a predefined set of values that represents a list of possible options. You can use them to group values within a type.

  • Component: a pre-defined set of fields that can be reused across models and content entries. You can think of a component as a flexible, reusable template: you define the fields that will be used inside a component once, and then fill them with different content every time you use it in a content entry.

  • Basic component field: a component is a special field type in your Hygraph schema that defines which components of which type can be used in a model. Component fields can be of basic or modular types. A basic component field can only have one component attached to it. You can limit the number of component instances to one, or allow multiple component instances to be added in the content entry.

  • References: References are relations between two or more content entries in your project. With references, you can reuse content entries by connecting them. Once the relation is configured, you can also use it to create related content from the content creation screen.

#What you can do

This guide offers two paths:

  • Path 1: Use this guide to create a sectioned navigation that you can use in your Hygraph projects.
  • Path 2: Clone the project that contains the entire Navigation cookbook to compare the different navigation configurations without having to clone multiple projects.

#Step-by-step guide

Before we can build our Sectioned Navigation, we need to create other schema elements that we can later add to it.

To make this guide easier to follow, we've divided it in steps for you.

#1. Create the models

We'll start by creating three sample models - Product, Store, and Blog - that we will use as referenceable models later to create our navigation items.

We'll click + Add next to Models and use the following information:

FieldInput
Display NameProduct
API IDProduct
API ID PluralProducts

Create the modelsCreate the models

We'll click Add Model to save.

Normally, we'd add fields to these models, but for the sake of this example, we'll simply leave them empty.

Repeat the process to create a second model:

FieldInput
Display NameBlog
API IDBlog
API ID PluralBlogs

We'll click Add Model to save.

And one final time for our third model:

FieldInput
Display NameStore
API IDStore
API ID PluralStores

We'll click Add Model to save.

Finally, we will create one more model for our sectioned navigation, using the following information:

FieldInput
Display NameSectioned navigation
API IDSectionedNavigation
API ID PluralSectionedNavigations

We'll click Add Model to save. This model won't stay empty, but before we can start adding fields to it, we need to build an enumeration and a component.

#2. Create a theme enumeration

We want our navigation to allow choosing a theme. To do this, we'll create an enumeration that we can later add to our Navigation model as a field.

We'll click + Add next to Enumerations and use the following information:

FieldInput
Display NameNavigation theme
API IDNavigationTheme

Sectioned navigation - Theme enumerationSectioned navigation - Theme enumeration

Next, we need to add enumeration values. These are the options we will get when using this later on as a dropdown menu.

For every enumeration value, you need to enter a Display name, an API ID, and click Add.

We'll add the following values:

Display nameAPI ID
Lightlight
Darkdark

Sectioned navigation - Theme valuesSectioned navigation - Theme values

We'll click Add enumeration to save.

#3. Create the components

We want our navigation to have nested components. We will create a navigation item component that will allow us to add multiple links to our navigation. We will then nest this component into a navigation section component. The objective is to be able to add several sections with links.

The first component that we will create is the Navigation item component. We'll click + Add next to Components and add it using this information:

FieldInput
Display NameNavigation item
API IDNavigationItem
API ID PluralNavigationItems

Navigation item componentNavigation item component

We'll click Add component to save. We can now start adding instances to this component.

We'll start by adding a Single line text field by clicking on it on the Add fields right sidebar.

We'll use the following information:

TabFieldInput
SettingsDisplay NameLink label
SettingsAPI IDlinkLabel
SettingsUse as title field checkboxSelect this checkbox
ValidationsMake field required checkboxSelect this checkbox

Navigation item component - Link labelNavigation item component - Link label

We'll click Add to save. This field will let us add a label to our links.

Next, we want our navigation to indicate if an item is new. To do this, we'll add a boolean field using the following information:

TabFieldInput
SettingsDisplay NameNew item toggle
SettingsAPI IDnewItemToggle

Navigation item component - ToggleNavigation item component - Toggle

We'll click Add to save.

We want our navigation to offer the possibility to add both internal and external links. We'll add a reference for the internal links, and a slug field for the external ones. In this case, we won't be making them required fields, because users will either use one or the other.

We'll start with the reference field. We'll find the Reference field on the Add fields right sidebar, click on it, and use the following information:

TabFieldInput
DefineReference typeSelect Allow multiple models to be referenced (Union Type)
DefineModels to referenceUse the dropdown menu to select Product, Blog and Store
DefineReference directionSelect One-way reference
DefineRelation cardinalitySelect One to One
Configure referenceDisplay NamePage
Configure referenceAPI IDpage

Navigation item component - ReferenceNavigation item component - Reference

We'll click Add to save. We've configured the reference in such a way that when we find this field in a content entry, it will allow us to select an entry from the models that we configured.

Finally, we'll add a slug field for our external URLs, using the following information:

TabFieldInput
SettingsDisplay NameExternal Link
SettingsAPI IDexternalLink
SettingsLowercase checkboxLeave this checkbox selected
ValidationsSet field as unique checkboxLeave this checkbox selected
ValidationsMatch a specific pattern checkboxLeave this checkbox selected, and use the dropdown to select the URL pattern. Write "Input value does not match the expected format." in the Custom error message field.

Navigation item component - External URLNavigation item component - External URL

We'll click Add to save.

Now that we created our Navigation item component, we can start working on our Navigation section component.

We'll click + Add next to Components and add it using this information:

FieldInput
Display NameNavigation section
API IDNavigationSection
API ID PluralNavigationSections

Navigation section componentNavigation section component

We'll click Add component to save. We can now start adding instances to this component.

We'll add a Single line text field by clicking on it on the Add fields right sidebar and using the following information:

TabFieldInput
SettingsDisplay NameSection title
SettingsAPI IDsectionTitle
SettingsUse as title field checkboxSelect this checkbox
ValidationsMake field required checkboxSelect this checkbox

Navigation section component - TitleNavigation section component - Title

We'll click Add to save. This field will let us add a title to our navigation sections.

Now it is time to add the navigation item component that we created earlier. We'll click on the Basic component field in the Add fields right sidebar and use the following information:

TabFieldInput
SettingsDisplay NameNavigation items
SettingsAPI IDnavigationItems
SettingsAllow multiple values checkboxSelect this checkbox
SettingsSelect componentUse the dropdown to select the "Navigation item" component

Navigation section component - Navigation itemNavigation section component - Navigation item

We'll click Add to save.

In this case, we've allowed multiple values, because that way we can add as many links as we want to our navigation section.

#4. Add fields to the Navigation model

We'll go back into our Sectioned Navigation model now, to add fields to it. The reason we're creating this navigation as a model, is so that we can then create an entry per navigation that we want to build using this configuration.

First, we will add a slug field that will be our navigation ID. We'll click on the Slug field in the Add fields right sidebar and use the following information:

TabFieldInput
SettingsDisplay NameNavigation ID
SettingsAPI IDnavigationId
SettingsLowercase checkboxLeave this checkbox selected
SettingsUse as title field checkboxSelect this checkbox
ValidationsSet field as unique checkboxLeave this checkbox selected
ValidationsMatch a specific pattern checkboxLeave this checkbox selected, and use the dropdown to select the Slug pattern. Write "Input value does not match the expected format." in the Custom error message field.

Sectioned navigation model - Navigation IDSectioned navigation model - Navigation ID

We'll click Add to save.

Now it is time to add the Navigation section component that we created earlier. We'll click on the Basic component field in the Add fields right sidebar and use the following information:

TabFieldInput
SettingsDisplay NameSections
SettingsAPI IDsections
SettingsAllow multiple values checkboxSelect this checkbox
SettingsSelect componentUse the dropdown to select the "Navigation section" component

Sectioned navigation model - SectionsSectioned navigation model - Sections

We'll click Add to save. In this case, we've allowed multiple values, because that way we can add as many links as we want to our navigation.

Finally, we'll add the theme enumeration that we created earlier. We'll find the Enumeration field on the Add fields sidebar, and add it using this information:

TabFieldInput
SettingsDisplay NameTheme
SettingsAPI IDtheme
SettingsEnumerationSelect "Navigation theme" from the dropdown menu

Sectioned navigation model - ThemeSectioned navigation model - Theme

We'll click Add to save.

Our sectioned navigation model should look like this:

Sectioned navigationSectioned navigation

This guide helped you create the schema element yourself. Alternatively, you can clone a project containing all our navigation recipes.

Check out the next document section for that!

#Clone project

We have prepared a project that contains the entire Navigation cookbook:

Clone this project

This cookbook contains all the recipes we have so far to create navigation elements, so you can compare the different navigation configurations without having to clone multiple projects.

To find this particular recipe in the cookbook project, navigate to the schema and look for "Sectioned Navigation".