# 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:** 1\
**Showing post:** 2

<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 🙂

---

_[View the full topic](https://community.hubspot.com/t/customize-breadcrumb-output/23791)._