Customize Breadcrumb output

Hi @rohansdeeson

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 :slightly_smiling_face: and if you need to add more levels, it should be pretty easy to add another if statement when using the menu variables.
Sandy :slightly_smiling_face: