CMS Development

rohansdeeson
Top Contributor

Customize Breadcrumb output

SOLVE

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

0 Upvotes
1 Accepted solution
SandyG1
Solution
Contributor | Partner
Contributor | Partner

Customize Breadcrumb output

SOLVE

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 🙂 

View solution in original post

9 Replies 9
Chetan_1
Participant

Customize Breadcrumb output

SOLVE

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
Community Manager
Community Manager

Customize Breadcrumb output

SOLVE

Thanks for sharing, @Chetan_1 🙌

linkedin

Jaycee Lewis

Developer Community Manager

Community | HubSpot

0 Upvotes
SandyG1
Contributor | Partner
Contributor | Partner

Customize Breadcrumb output

SOLVE

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
Contributor

Customize Breadcrumb output

SOLVE

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. 

0 Upvotes
fawadsabri
Contributor

Customize Breadcrumb output

SOLVE

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 

0 Upvotes
richardwalsh
Participant | Platinum Partner
Participant | Platinum Partner

Customize Breadcrumb output

SOLVE

This worked perfectly!

SandyG1
Solution
Contributor | Partner
Contributor | Partner

Customize Breadcrumb output

SOLVE

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
Member

Customize Breadcrumb output

SOLVE

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

 

0 Upvotes
fawadsabri
Contributor

Customize Breadcrumb output

SOLVE

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

0 Upvotes