Question

Nav subitems display/iteration problem

Forum|Forum|4 years ago
January 8, 2022
1 reply
759 views

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

group.html

<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>
    </ul>
    <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>
            </div>
        </div>
    </div>
</template>

item.html

<template data-sly-template.item="${@ item='The navigation item', index}"
          data-sly-use.groupTemplate="group.html"
          data-sly-use.subgroupTemplate="group.html"
          data-sly-use.itemContentTemplate="itemContent.html">
    <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>
    </li>
</template>

itemContent.html

<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>
</template>