# Customize Breadcrumb output

**URL:** <https://community.hubspot.com/t/customize-breadcrumb-output/23791>\
**Category:** CMS Development\
**Created:** [August 5, 2020, 7:36am UTC](https://community.hubspot.com/t/customize-breadcrumb-output/23791 "2020-08-05T07:36:14Z")\
**Posts on this page:** 11\
**Page:** 1

<div class="post-metadata">

**Author:** ![rohansdeeson](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/rohansdeeson/32/2679_2.png) [@rohansdeeson](https://community.hubspot.com/u/rohansdeeson)\
**Post date:** [August 5, 2020, 7:36am UTC](https://community.hubspot.com/t/customize-breadcrumb-output/23791/1 "2020-08-05T07:36:14Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![SandyG1](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/sandyg1/32/77083_2.png) [@SandyG1](https://community.hubspot.com/u/SandyG1)\
**Post date:** [August 6, 2020, 11:24am UTC](https://community.hubspot.com/t/customize-breadcrumb-output/23791/2 "2020-08-06T11:24:08Z")

</div>

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](https://developers.hubspot.com/docs/cms/hubl/functions#menu) which led me to the [menu node variables](https://developers.hubspot.com/docs/cms/hubl/variables#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.

```auto
{% 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:

```auto
.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 🙂

---

<div class="post-metadata">

**Author:** ![fawadsabri](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/fawadsabri/32/102437_2.png) [@fawadsabri](https://community.hubspot.com/u/fawadsabri)\
**Post date:** [February 10, 2021, 5:11pm UTC](https://community.hubspot.com/t/customize-breadcrumb-output/23791/3 "2021-02-10T17:11:21Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![MFaran](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/mfaran/32/13521_2.png) [@MFaran](https://community.hubspot.com/u/MFaran)\
**Post date:** [May 27, 2021, 6:47am UTC](https://community.hubspot.com/t/customize-breadcrumb-output/23791/4 "2021-05-27T06:47:21Z")

</div>

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

```auto
{% 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 %}

```

---

<div class="post-metadata">

**Author:** ![richardwalsh](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/richardwalsh/32/9004_2.png) [@richardwalsh](https://community.hubspot.com/u/richardwalsh)\
**Post date:** [October 21, 2020, 3:43am UTC](https://community.hubspot.com/t/customize-breadcrumb-output/23791/5 "2020-10-21T03:43:27Z")

</div>

This worked perfectly!

---

<div class="post-metadata">

**Author:** ![SandyG1](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/sandyg1/32/77083_2.png) [@SandyG1](https://community.hubspot.com/u/SandyG1)\
**Post date:** [February 11, 2021, 8:57am UTC](https://community.hubspot.com/t/customize-breadcrumb-output/23791/6 "2021-02-11T08:57:23Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![fawadsabri](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/fawadsabri/32/102437_2.png) [@fawadsabri](https://community.hubspot.com/u/fawadsabri)\
**Post date:** [February 11, 2021, 10:15am UTC](https://community.hubspot.com/t/customize-breadcrumb-output/23791/7 "2021-02-11T10:15:11Z")

</div>

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.

```auto
{% 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

---

<div class="post-metadata">

**Author:** ![fawadsabri](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/fawadsabri/32/102437_2.png) [@fawadsabri](https://community.hubspot.com/u/fawadsabri)\
**Post date:** [February 16, 2021, 9:54am UTC](https://community.hubspot.com/t/customize-breadcrumb-output/23791/8 "2021-02-16T09:54:21Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Chetan\_1](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/chetan_1/32/30640_2.png) [@Chetan\_1](https://community.hubspot.com/u/Chetan_1)\
**Post date:** [January 26, 2023, 5:33pm UTC](https://community.hubspot.com/t/customize-breadcrumb-output/23791/9 "2023-01-26T17:33:40Z")

</div>

**Use these instead because it is just simple and customizable**

```lia-code-sample
<p>
<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 }}</p>

```

---

<div class="post-metadata">

**Author:** ![Jaycee\_Lewis](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/jaycee_lewis/32/61352_2.png) [@Jaycee\_Lewis](https://community.hubspot.com/u/Jaycee_Lewis)\
**Post date:** [January 30, 2023, 5:03pm UTC](https://community.hubspot.com/t/customize-breadcrumb-output/23791/10 "2023-01-30T17:03:50Z")

</div>

Thanks for sharing, [@Chetan\_1](https://community.hubspot.com/t5/user/viewprofilepage/user-id/511229) 🙌

---

<div class="post-metadata">

**Author:** ![rolah1](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/rolah1/32/197543_2.png) [@rolah1](https://community.hubspot.com/u/rolah1)\
**Post date:** [November 20, 2025, 2:57pm UTC](https://community.hubspot.com/t/customize-breadcrumb-output/23791/11 "2025-11-20T14:57:33Z")

</div>

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](https://developers.hubspot.com/docs/cms/hubl/functions#menu) which led me to the [menu node variables](https://developers.hubspot.com/docs/cms/hubl/variables#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.

```lia-code-sample
{% 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>
 <span class="hs-breadcrumb-menu-divider"></span>
 </li>

 {% for item in all_levels|reverse %}
 {% if loop.last %}
 <li class="hs-breadcrumb-menu-item last-crumb">
 <span class="hs-breadcrumb-label">{{ item.label }}</span>
 </li>
 {% elif item.url == '' %}
 <li class="hs-breadcrumb-menu-item crumb">
 <span class="hs-breadcrumb-label">{{ item.label }}</span>
 <span class="hs-breadcrumb-menu-divider"></span>
 </li>
 {% else %}
 <li class="hs-breadcrumb-menu-item crumb">
 <a href="{{ item.url }}" class="hs-breadcrumb-label">{{ item.label }}</a>
 <span class="hs-breadcrumb-menu-divider"></span>
 </li>
 {% endif %}
 {% endfor %}

 </ul>
 </div>
{% endif %}

```