Expand my Community achievements bar.

Nav subitems display/iteration problem


Level 1

*** EDIT: ***

Solved by myself xD
${index} was required in navigation id 



Hi guys,


Can you please help me how to iterate navigation subitems using navigation core component?

My issue is that I can display all level 0 items correctly, but when trying to display level 1 items I can see all navigation subitems instead of those belonging to parent.


Code for level 1 is quite different than for level 0 and I can not use <ul> from group.html, so instead it starts with <div> and id.




<template data-sly-template.group="${@ items='The navigation items for the current level', subitems}" data-sly-use.itemTemplate="item.html">
    <ul class="d-md-flex justify-content-md-center cmp-navigation__group" data-sly-list="${items}">
        <sly data-sly-call="${itemTemplate.item @ item=item, index=itemList.index}"></sly>
    <div id="navMenuSub3" class="nav-menu-sub cmp-navigation__item cmp-navigation__item cmp-navigation__item--${subitems.index}--level-1${item.active ? ' is-active' : ''}">
        <div class="row" data-sly-list="${subitems}">
            <div class="col-12 col-md-4">
            <a href="${item.URL}">${itemList.index} ${item.title}</a>





<template data-sly-template.item="${@ item='The navigation item', index}"
    <li class="nav-menu-item cmp-navigation__item cmp-navigation__item--${index}--level-${item.level} ${item.active ? 'is-active' : '' }">
        <sly data-sly-call="${itemContentTemplate.itemContent @ item = item}"></sly>
        <sly data-sly-test="${item.children.size > 0}" data-sly-call="${groupTemplate.group @ subitems = item.children, index=itemList.index}"></sly>





<template data-sly-template.itemContent="${@ item='The navigation item'}"> 
        <h3><a href="${item.level == 1 ? '#' : item.URL}" data-nav="${item.children.size > 0 ? 'navMenuSub3' : ''}" class="cmp-navigation__item-link">${item.title}</a></h3>



1 Reply


Community Advisor

Like you have mentoned, ${index} was required in navigation id.