Customize Breadcrumb output

[rohansdeeson]

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

[Chetan_1]

Use these instead because it is just simple and customizable

<p>
<a href="{{ blog.absolute_url }}">{{ blog.name }}&nbsp; </a>/ &nbsp;{% 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 %} / &nbsp; {{ content.name }}</p>

[Jaycee_Lewis]

Thanks for sharing, @Chetan_1 🙌

[SandyG1]

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

[fawadsabri]

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. 

[fawadsabri]

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 

[richardwalsh]

This worked perfectly!

[SandyG1 · Accepted solution]

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 🙂 

[MFaran]

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 %}

[fawadsabri]

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