Customize Breadcrumb output

SOLVE
Highlighted
Regular Contributor

So We are generating a breadcrumb from our main menu like so.

{% menu "breadcrumb" id=32386756055, site_map_name='Main Menu', overrideable=False, root_type='breadcrumb', flyouts='false', max_levels='4', flow='horizontal', label='Advanced Menu' %}

Is there any way to customise the output of these, for example, use a different separator or to prepend Home to the listing

0 Upvotes
1 Accepted solution

Accepted Solutions
Highlighted
Solution
Regular Contributor | Partner

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

Sandy 🙂 

View solution in original post

2 Replies 2
Highlighted
Solution
Regular Contributor | Partner

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

Sandy 🙂 

View solution in original post

Highlighted
Regular Contributor | Gold Partner

This worked perfectly!