Simple navigation: The Hygraph way

Navigation is one of the main content components of your website or application. It helps provide directions to end-users and a topic summary of the content available. A well-structured navigation system is integral to the overall content design and layout of your website or app. It not only helps organize and categorize your content systematically but also ensures a smooth and seamless journey for your users.

In Hygraph, you can create a navigation component that links to internal or external content to carve out content paths for your users from their initial point of entry to the final destination within your app. Let’s create a simple navigation model using components to create a main navigation system.

Note: This guide uses a version of the Next eCommerce Hygraph project without navigation and frontend starter code. To follow along, clone:

1. Hygraph eCommerce project
2. Next frontend code

#Constructing a navigation model

The most effective navigation systems consider the users' desires and needs and the business's goals. They create a bridge between the two, guiding the users to the areas where they and the business want them to be. When creating content for the main menu, our aim should be to construct a bridge that connects the user's intent with the business's offerings, making the journey on your website or app a smooth and satisfying experience.

To create a main navigation system, we need to build a Navigation content model. From the “Schema” menu item in our Hygraph project, select “Add” from the Models section and add a model called Navigation.

Slug: Nav ID field

The first field type we will add to our Navigation model is a slug field called NavId with the following options:

The navId allows us to create different navigation content areas. For example, the NavId for this system will be main, but we could also create footer or social navigation.

Building a Link component

Since we want to have to internal and external links in our navigation, creating a component to add to our Navigation model is the best approach. From the “Schema” menu item in our Hygraph project, select “Add” from the Components section, and add a component called Link and add the following fields:

Basic component: Nav Link field

Now that we have a Link component, we can add it to our Navigation model. Head back to the Navigation model and add a Basic component called Nav Link with the following options:

#Creating main navigation content

Our navigation model is complete, so let’s create content for the main menu. It can seem strange to think of navigation as content that you write, but it is one of the most important elements of your overall content design. The best navigation creates paths tailored to target audience and tell them where to go get what they need and incorporates what you want them to know/where you want them to visit on your website or app.

In the content section of the app, we are going to create a new content entry in the Navigation view. For the Nav ID, enter main , this will serve as the ID for you guessed it, our main navigation system. After this we can add our links to populate the menu. Enter a couple or all of the external links and the internal Page link from the table below:

After entering the links, click Save & Publish.

A well-crafted menu isn't just a map or a directory; it's a strategic guide that leads your users through the digital landscape of your website or application. It is responsible for creating paths that are specifically tailored to your target audience. These paths serve as a series of stepping stones that guide users towards the areas that you want them to explore, be it certain products, services, or information. The main menu here is directing users to main product groups available in the store and highlights a featured collection of products for a seasonal campaign.

#Querying the navigation model

Now that we have a main menu, let’s take a look at the query we need to create a navigation frontend component. Head over to the API playground, and enter the following query:

query  Navigation {
    navigation(where: {navId: "main"}) {
      navId
      navLink {
        id
        page {
          ... on BlogPost {
            id
            url: slug
          }
          ... on LandingPage {
            id
            url: link
          }
          ... on Product {
            id
            productSlug
          }
        }
        url: externalUrl
        displayText

      }
    }
  }

In the above GraphQl query, we are asking Hygraph to give us the menu with the navID called main. The query fetches the navId and navLink fields of the navigation data.

So, what is the the navigation data and what are we returning?

Well, the navLink field is an object that contains id, page, url, and displayText fields. The page field is further broken down into different types: BlogPost, LandingPage, and Product, each with their own id and url fields.

The query results are all the external and internal page links and its displayText that we entered in the main navigation content entry.

#Frontend proof of concept for navigation

To preview the main navigation in action, follow the Lesson 7.2 of the getting starting flow to connect the Next eCommerce frontend code.

Main menu for Hygraph shop

Mobile menu for Hygraph shop

Remember, navigation plays a crucial role in providing clear, user-friendly directions to end-users, guiding them through the multitude of pages and features your platform has to offer. This is a critical factor in creating enjoyable user experience, as it directly influences how easily and quickly users can navigate your site or application.

#Conclusion

By making navigation intuitive, straightforward, and efficient, you can significantly enhance the overall user experience. The easier it is for users to find what they're looking for, the more likely they are to stay engaged and return to your website or app in the future. Investing time and resources in crafting a compelling, user-friendly navigation system can improve user satisfaction and, ultimately lead to higher conversion rates. Remember, navigation is the chance to tell the story of your brand or business by creating a treasure map of all the wonderful products and content you have to offer. If you have any questions or feedback, find me in the community!

Next steps...

In part 2 of the Navigation series, we will create a more complex navigation model that includes sub-items and how to create a dropdown menu frontend components.