topic Re: Customize Breadcrumb output in CMS Development

Customize Breadcrumb output

rohansdeeson — Mon, 09 Nov 2020 18:57:27 GMT

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

Re: Customize Breadcrumb output

SandyG1 — Thu, 06 Aug 2020 12:07:00 GMT

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 🙂

Re: Customize Breadcrumb output

richardwalsh — Wed, 21 Oct 2020 03:43:27 GMT

This worked perfectly!

Re: Customize Breadcrumb output

fawadsabri — Wed, 10 Feb 2021 17:11:21 GMT

I am trying to add one more level and somehow it doesnt seem to work. I think i am missing something.

Re: Customize Breadcrumb output

SandyG1 — Thu, 11 Feb 2021 08:57:23 GMT

Hi @fawadsabri,

Would you mind sharing some of your code, I may be able to see where you're going wrong with the 3rd level for breadcrumbs using this method..

Sandy

Re: Customize Breadcrumb output

fawadsabri — Thu, 11 Feb 2021 10:15:11 GMT

Hi @SandyG1

Thank you for the quick reply. So basically i changed the code for level 2 and was hoping it will show the third level. Here is what i just added into your code. But it just shows the ParentNode twice. I didnt find another variable that i could add.

{%  if node.level > '2' %}
    <li class="hs-breadcrumb-menu-item second-crumb">
      <a href="{{node.parentNode.url}}" class="hs-breadcrumb-label">{{node.parentNode.label}}</a>
      <span class="hs-breadcrumb-menu-divider"></span>
    </li>
{% endif %}

I would really appreciate if you could help.

Fawad

Re: Customize Breadcrumb output

fawadsabri — Tue, 16 Feb 2021 09:54:21 GMT

Hi @SandyG1 did you get a chance to look at the code? I also figured out to use the HubSpot default Menu option to show the breadcrumbs with an option to show 10 levels but i dont have the freedom to format the different levels, for example show the current page normal and parent pages bold.

Re: Customize Breadcrumb output

MFaran — Thu, 27 May 2021 06:47:21 GMT

For Level 3 I just update your code But it just shows the ParentNode twice. Can you please explain the issue?

{%  if node.level > '2' %}
    <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 %}

Re: Customize Breadcrumb output

Chetan_1 — Thu, 26 Jan 2023 17:33:40 GMT

Use these instead because it is just simple and customizable

<a href="{{ blog.absolute_url }}">{{ blog.name }}  </a>/  {% for topic in content.topic_list %} <a class="blog-tag {{ topic.slug }}" href="{{ blog_tag_url(group.id, topic.slug) }}">{{ topic.name }}</a>{% if not loop.last %}{% endif %} {% endfor %} /   {{ content.name }}

Re: Customize Breadcrumb output

Jaycee_Lewis — Mon, 30 Jan 2023 17:03:50 GMT

Thanks for sharing, @Chetan_1 🙌

Re: Customize Breadcrumb output

rolah1 — Thu, 20 Nov 2025 14:57:33 GMT

I found the post by SandyG1 to be extremely helpful, but I needed breadcrumbs that went beyond 2 levels which is all his solution supports.

The solution below riffs on SandyG1's version, but gets you all the levels/parentNodes for an page (up to 10 levels but you could go higher by adjusting the range(0,10)).

I'll relink the two links that SandyG1 highlighted because they are helpful for anyone who wants to futher modify my code below - " I dug around and found the menu function which led me to the menu node variables"

You will need replace the id="11111111111" with the id from your menu, either hard coded or use a module.menu variable.

{% set node = menu(id="1111111111111", root_type="breadcrumb") %} {% set all_levels = [node] %} {% for x in range(0, 10) %} {% if all_levels[x].parentNode != null %} {% set updateNode = all_levels.append(all_levels[x].parentNode) %} {% endif %} {% endfor %} {% if node != null %} <div class="hero-breadcrumbs"> <ul class="hs-breadcrumb-menu"> <li class="hs-breadcrumb-menu-item first-crumb"> <a href="/" class="hs-breadcrumb-label">Home</a> </li> {% for item in all_levels|reverse %} {% if loop.last %} <li class="hs-breadcrumb-menu-item last-crumb"> {{ item.label }} </li> {% elif item.url == '' %} <li class="hs-breadcrumb-menu-item crumb"> {{ item.label }} </li> {% else %} <li class="hs-breadcrumb-menu-item crumb"> <a href="{{ item.url }}" class="hs-breadcrumb-label">{{ item.label }}</a> </li> {% endif %} {% endfor %} </ul> </div> {% endif %}