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

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

[rolah1 · Accepted solution]

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

[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.