How to build a website header menu navigation with Storyblok
Storyblok is the first headless CMS that works for developers & marketers alike.
This article is outdated. Please checkout our new article Creating global components and referencing them here.
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:
- Setting up a "global" component as the root for a new story.
- Setting up the template for the global story.
- Loading the content of the global resource wherever we need.
- 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
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:
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
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:
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