Your achievements

Level 1

0% to

Level 2

Tip /
Sign in

Sign in to Community

to gain points, level up, and earn exciting badges like the new
Bedrock Mission!

Learn more

View all

Sign in to view all badges

Nav subitems display/iteration problem

Avatar

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.

 

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>

 

 

0 Replies