Multiple node levels for a breadcrumb menu

Developer Support CMS Development
1

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
VMNaude_0-1699267286116.png512×100 4.88 KB

Below is the nav structure:

VMNaude_1-1699267352529.png
VMNaude_1-1699267352529.png1562×295 18.3 KB

Kindly assist if possible?

2

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