I’ve been looking into creating breadcrumbs myself.
To create a unique breadcrumb in HubSpot CMS using the menu module, I dug around and found the menu function which led me to the menu node variables
From here, I found the variables required to get exactly what I need to create my own custom breadcrumb.
I just created the following and this should help you or atleast give you a good starting point.
{% set menu_id = module.renamed_from_id || module.menu %}
{% set node = menu(menu_id,"breadcrumb") %}
{# if node null means it's pretty much the home page, so don't display it #}
{% if node != null %}
<ul class="hs-breadcrumb-menu">{# Add the home page in #}
{% if node.level > '0' %}
<li class="hs-breadcrumb-menu-item first-crumb">
<a href="/" class="hs-breadcrumb-label">Home</a>
<span class="hs-breadcrumb-menu-divider"></span>
</li>
{% endif %}{# Add the level in between if it's level 2 #}
{% if node.level > '1' %}
<li class="hs-breadcrumb-menu-item first-crumb">
<a href="{{node.parentNode.url}}" class="hs-breadcrumb-label">{{node.parentNode.label}}</a>
<span class="hs-breadcrumb-menu-divider"></span>
</li>
{% endif %}{# ADD the CURRENT PAGE #}
<li class="hs-breadcrumb-menu-item last-crumb">
<span class="hs-breadcrumb-label">{{node.label}}</span>
</li>
</ul>
{% endif %}
- This includes HOME and will not display on the home page.
- To change the seperator, alls you need to do is:
.hs-breadcrumb-menu-divider:before {
content: '/'; //INSERT YOUR SEPARATOR HERE
padding-left: 10px;
}
As for the first line:
{% set menu_id = module.renamed_from_id || module.menu %}
You’ll need to ensure the module contains a field named menu with the type of menu.
This should be good for up to 2 levels (ex home). EG
Home // About US (Top level) // The team (2ndlevel
I hope this helps you in creating the breadcrumb you desire
and if you need to add more levels, it should be pretty easy to add another if statement when using the menu variables.
Sandy ![]()