How to build a website header menu navigation with Storyblok

Contents

In this tutorial you will learn how to setup 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 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.

a global component

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.

Selection of the global root component

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.

Header link added to global

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).

header link content

That’s the whole setup to store data for your global content already. In the next step we will have a look on 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 it’s given slug. In our case the slug is global and we can access is by perfoming 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

More to read...

About the author

Dominik Angerer

Dominik Angerer

A web performance specialist and perfectionist. After working for big agencies as a full stack developer he founded Storyblok. He is also an active contributor to the open source community and one of the organizers of Stahlstadt.js.