Create Dynamic Menus in Storyblok and Gatsby.js
Storyblok is the first headless CMS that works for developers & marketers alike.
If you'd like to build a multilanguage website with Gatsby, please follow this tutorial instead. If you'd like to build a website without internationalization logic, please keep following the rest of this article and the Ultimate Tutorial articles.
In this part of the tutorial series, we'll make the menu in our header dynamic, so that can manage it directly through Storyblok!
If you’re in a hurry, have a look at our Ultimate Tutorial GitHub repo part 3 branch!
Section titled Requirements Requirements
This tutorial is part 3 of the Ultimate Tutorial Series for Gatsby.js! We recommend that you follow the previous tutorials before starting this one.
Section titled Setup in Storyblok Setup in Storyblok
First, we will have to create a new content-type component where our menu items can be stored. Go to {1} Block Library, and then select {2} + New Block.
Name this block, config
{1} and then choose the Content Type block {2}.
Next, create a new field with the name header_menu
{1} and choose the field type Blocks {2}.
We need menu item links to add to our header_menu
, so we need to create a new block. This time, choose the block type {2} Nested Block and {1} name it menu_link
.
Now we can add a new field called link
{1} in this newly created block and choose Link as the field type {2}.
We also need to add a name for our menu_link
so let's add a new field called, name
! {1}Type in name into the field. Since the default field type is text
{2}, there is no need to change it. Now to officially add it, click on {3} Add.
Next, we need to make sure that only menu_link
blocks are allowed to be added to our header_menu
block.
{1} Choose the config
block, and {2} select header_menu
.
Under the {1} Block Field Options heading and {2} select Allow only specific components to be inserted.
Then, in the Components Whitelist input field, {3} type in menu_link
to add to the whitelist.
There's just one more step left in this setup, and that's to create the Content for our Storyblok space. Go to the {1} Content tab, and select {2} + Create new. Then choose {3} Story.
Here, we want to create a new story with the name {1} Config, using our recently created content type {2} Config.
If you open this newly created Config story, you can now add/nest as many menu_link
blocks in the header_menu
field as you would like. For now, let’s add our {1} About and {2} Blog page.
Section titled Rendering the Menu in Gatsby.js Rendering the Menu in Gatsby.js
Now, let's create the code that will render our menu in the frontend of our application. First, let’s review what our imports from the Storyblok Gatsby SDK -- storyblokEditable
and StoryblokComponent
-- do:
storyblokEditable
makes our components editable in our Real-Time Visual Editor.StoryblokComponent
sets up our page for our Storyblok components.
Then, let's set up our components: config.js
, and menuLink.js
to match with our blocks created in Storyblok.
Let's start from config.js
file.
First, we'll make sure that the Config content-type story will be generated through File System Route API from Gatsby.
After creating config.js
file, let's modify {storyblokEntry.full_slug}.js
file because Config content-type and Page content-type have different structures from draft/published JSON.
We'll conditionally render different data paths to render different content-type stories in {storyblokEntry.full_slug}.js
file.
Line 14 and 16 are conditionally filtering the names of the content-type. Page content-type returns dynamic components by mapping inside of the body
. On the other hand, Config content-type returns dynamic components without body
.
Next up, we'll create menuLink.js
file.
Let’s make sure those components render. In layout.js
, add your components:
In the previous tutorial (Render Storyblok Stories Dynamically in Gatsby), we didn't make header navigation to be dynamic. Now, we have Config content-type component and Menu Link nested component ready. We can update navigation.js
file to dynamically render header navigation items.
Now, if you go back to your Storyblok Visual Editor, you should be able to see your menu being rendered! You can add more links, remove them, or even reorder them if you like.
Section titled Wrapping Up Wrapping Up
Congratulations, you have successfully created a dynamic menu in Storyblok and Gatsby.js!
Continue reading and Create Custom Components in Storyblok and Gatsby.js
Resource | Link |
---|---|
Storyblok Gatsby.js Ultimate Tutorial | https://www.storyblok.com/tp/gatsby.js-headless-cms-ultimate-tutorial |
Gatsby Repo | https://github.com/storyblok/gatsby-storyblok-boilerplate |
Storyblok Technologies Hub | https://www.storyblok.com/technologies |
Gatsby.js Technology Hub | Storyblok Gatsby.js Technology Hub |
Storyblok Gatsby SDK | storyblok/gatsby-source-storyblok |