It is essential to have a navigation menu on your site, and people usually place them at the top of the page, or on the side of the page for /collection pages. Most themes have nice menus built in, but in the case that you would like to build one out in Builder, it is entirely possible. The first step is to get the menu item data. To do this, drag a custom code block into the content where you want the menu to display. Within that code component, paste in the following code, replacing impulse-main-menu with the name of the menu you built in shopify and would like to use for your navigation:
<script>
try {
window.BuilderLeftMenuList = [
{% for link in linklists.impulse-main-menu.links %}
{
active: {{link.active}},
open: {{link.active}} || {{link.child_active}},
childActive: {{link.child_active}},
title: "{{link.title}}",
url: "{{link.url}}",
links: [
{% for child_link in link.links %}
{
active: {{child_link.active}},
open: {{child_link.active}} || {{child_link.child_active}} || {{link.active}} || {{link.child_active}},
childActive: {{child_link.child_active}},
title: "{{child_link.title}}",
url: "{{child_link.url}}",
links: [
{% for grandchild_link in child_link.links %}
{
active: {{grandchild_link.active}},
open: {{grandchild_link.active}} || {{grandchild_link.child_active}} || {{child_link.active}} || {{child_link.child_active}},
childActive: {{grandchild_link.child_active}},
title: "{{grandchild_link.title}}",
url: "{{grandchild_link.url}}",
},
{% endfor %}
]
},
{% endfor %}
]
},
{% endfor %}
];
} catch (e) {
console.log('error creating linklist data')
}
</script>
What this custom script does is make the link data available to Builder when the page loads. The next step is to build out the navigation menu in Builder. Have a look at the following Builder fiddle to see how to do it, or just feel free to download the json from the fiddle and upload it into your content.
The last step is to add the following custom code the content JS panel, which you can access by clicking the Edit custom JS + CSS on the Data tab within the editor:
if (Builder.isBrowser) {
if (window.BuilderLeftMenuList) {
state.leftNavigationLinks = window.BuilderLeftMenuList;
}
}
This bit of code makes the data we printed to the window object available on the state object, so we can use it in our menu item.
This technique can be modified to suit whatever the shape of your navigation data is, you will just need to change the bindings in the navigation blocks.