How to build a website header menu navigation with Storyblok

Contents
    Try Storyblok

    Storyblok is the first headless CMS that works for developers & marketers alike.

    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