How to build a website header menu navigation with Storyblok

In this tutorial, you will learn how to set up your project to load global stories to render a header menu and footer content. It is part of the Storyblok CMS kickstart series so you may have a look at the other tutorials as well. You can use the same configuration in Storyblok for your own setup - to simplify the tutorial we're using the rendering service and liquid.

What we will do:

1. Setting up a "global" component as the root for a new story.
2. Setting up the template for the global story.
3. Loading the content of the global resource wherever we need.
4. Render a header navbar using those data and display it using bootstraps navbar.

Setting up a "global" component

The global component is just another component - the only difference is that the flag for "using as root" is checked, and the "can be nested" checkbox is not. Using the configuration like that will allow us to use it as it's own page type. Since each page in this tutorial should have a header menu and we don't want to add such a component every time we're creating a new story with that component as root - the idea of a global resource is the way to solve that.

After creating the new component, navigate to "content" - press "Add" and select the "global" component as the main component in the select in that popup. This should look like in the picture below.

After this, we can add new schema keys to the global component. Let us start with some header links. Press "add Schema key" and insert a new field header_links of the field type components. Click on "add components" and create the next new component header_link.

Click on your newly created component and lets add 2 new fields - the actual link (link - type: Link) and a display name (display_name - type: text).

That's the whole setup to store data for your global content already. In the next step, we will look at how to load that content and render it properly. You can add a value for the link (just select home) and enter a display name - you can also add more header links if you want by simply pressing "add component" in the header_links field and select the header_link.

Loading the content of the global resource

Using the content delivery api, we can use the /v1/cdn/stories endpoint to load a specific content entry by its given slug. In our case, the slug is global and we can access it by performing a GET request:

        
      GET https://api.storyblok.com/v1/cdn/stories/global?token=your_access_token&version=draft
    

That's it; you can now consume the information and render the content for your global settings entry for a navigation or header and footer sections.

What did you just learn?

• You've created a new content type/root component
• You loaded a content entry by a specific slug