Create Dynamic Menus in Storyblok and Remix
Storyblok is the first headless CMS that works for developers & marketers alike.
In this part of the tutorial series, we'll make the menu in our header dynamic, so that we can manage it directly through Storyblok!
If you’re in a hurry, you can take a look at our demo in source code on GitHub! and take a look at the live version on Netlify.
Requirements
This tutorial is part 3 of the Ultimate Tutorial Series for Remix! We recommend that you follow the previous tutorials before starting this one.
Enter the name config
{1} and choose Content type block {2}.
Now you can create a new field with the name header_menu
{1} and choose the field type Blocks {2}.
In this field, we would like to provide the possibility to add menu links as nested blocks. To accomplish that, let’s create another new block. This time it should be a Nested block {1} with the name menu_link
{2}.
Now we can add a new field called link
in this newly created block and choose Link as the field type.
Alright, our component schemas are almost done! Just one more step: to avoid that just any block could be nested in our header_menu
, we want to make sure that only specific components can be inserted {1}. Now you can choose the menu_link
block in the whitelist {2}.
With that out of the way, we can now go to the Content section of our Storyblok space. Here, we want to create a new story with the name Config {2}, using our recently created content type Config {3}.
If you open this newly created Config story, you can now {1} add/nest as many menu_link
blocks in the header_menu
field as you would like. For now, let’s add our {2} About and {3} Blog page.
Rendering the Menu in Remix
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 React 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 our components: MenuLink.jsx
component to match the one created in Storyblok.
Let’s make sure those components render.
In root.jsx
, add your components:
To ensure the headerMenu
has the necessary data, we'll use a loader function in the root.jsx
file. This approach will globally load the data from the server
add the following code in root.jsx
:
Next, let's update our Navigation.jsx
component. By using useLoaderData, we can fetch the headerMenu
data directly from the server.
This allows us to replace the hardcoded links with dynamic ones sourced from this data.
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.
Continue reading and Create Custom Components in Storyblok and Remix
Resource | Link |
---|---|
Storyblok Remix Ultimate Tutorial | https://www.storyblok.com/tp/the-storyblok-remix-ultimate-tutorial |
Github repository | https://github.com/storyblok/remix-ultimate-tutorial |
Storyblok Technologies Hub | https://www.storyblok.com/technologies |
Remix Technology Hub | https://www.storyblok.com/tc/remix |
Storyblok React SDK | storyblok/storyblok-react |