CMS Development

VMNaude
Member

Multiple node levels for a breadcrumb menu

I am trying to add another level to the breadcrumb menu, but all it does is duplicate level 2. Below is the code I am using:

{% set menu_id = module.renamed_from_id || module.menu %}
{% set node = menu(menu_id,"breadcrumb") %}


{% if node != null %}
<ul class="hs-breadcrumb-menu">


<div class="breadcrumb-container">
{# 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 level in between if it's level 3 #}

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

 

{# ADD the CURRENT PAGE #}

<li class="hs-breadcrumb-menu-item last-crumb">
<span class="hs-breadcrumb-label">{{node.label}}</span>
</li>
</div>

</ul>
{% endif %}

Below is the output:

VMNaude_0-1699267286116.png

Below is the nav structure:

VMNaude_1-1699267352529.png

 

Kindly assist if possible?

0 Upvotes
1 Reply 1
Jaycee_Lewis
Community Manager
Community Manager

Multiple node levels for a breadcrumb menu

Hi, there! I have a question to help the community better understand your issue. 

 

Question – does your node object have a parent node property of its own? It looks like you may need to adjust your code to reference node.parentNode.parentNode to access the “grandparent” node of the current node.

It's hard to be certain without knowing how your menu function is set up.

 

Thank you for the additional information! — Jaycee

linkedin

Jaycee Lewis

Developer Community Manager

Community | HubSpot

0 Upvotes