Expand my Community achievements bar.

Guidelines for the Responsible Use of Generative AI in the Experience Cloud Community.
SOLVED

How to hide a particular page in navigation | Hide in Navigation

Avatar

Level 2

After selecting the "Hide in Navigation" this page "Our Stories" is still appearing in the navigation.

sanchay1_1-1690302336446.png

 

What changes I need to do in my code??

Here is my backend HTL code:

 

<div class="cmp-secondary-navigation" data-component="secondaryNavigation">
<nav class="cmp-secondary-navigation__body">
<ul class="sec-navigation-list">
<li class="sec-navigation-list__item" data-sly-repeat="${currentPage.listChildren}">
<a class="sec-navigation-list__item__link" href="${item.path}.html">${item.title}</a>
</li>
</ul>
</nav>
</div>

 

Or do I need to implement any changes from Java side (sling model)

 

Please suggest the appropriate changes along with the code.

1 Accepted Solution

Avatar

Correct answer by
Community Advisor

you can add a logic in sightly to test if hideInNav value is selected or not for the condition to create an item list.

Be default currentPage.listChildren will list all the child pages.

may be some thing like this with data-sly-test

<div data-sly-test="${item.hideInNav == 'false'  }">
<a class="sec-navigation-list__item__link" href="${item.path}.html">${item.title}</a>
</div>

View solution in original post

3 Replies

Avatar

Correct answer by
Community Advisor

you can add a logic in sightly to test if hideInNav value is selected or not for the condition to create an item list.

Be default currentPage.listChildren will list all the child pages.

may be some thing like this with data-sly-test

<div data-sly-test="${item.hideInNav == 'false'  }">
<a class="sec-navigation-list__item__link" href="${item.path}.html">${item.title}</a>
</div>

Avatar

Employee

@sanchay1 Could you please check and update your backend HTL code to include a condition that checks the "Hide in Navigation" property of each page before adding it to the navigation list? If the property is set to true, skip adding that page to the navigation.
Sharing the modified code ,which might help you to achieve your ask.

 

<div class="cmp-secondary-navigation" data-component="secondaryNavigation">
  <nav class="cmp-secondary-navigation__body">
    <ul class="sec-navigation-list">
      <sly:repeat="${currentPage.listChildren}">
        <sly:if test="${!item.hideInNav}">
          <li class="sec-navigation-list__item">
            <a class="sec-navigation-list__item__link" href="${item.path}.html">${item.title}</a>
          </li>
        </sly:if>
      </sly:repeat>
    </ul>
  </nav>
</div>

 

Avatar

Community Advisor

In addition with @DPrakashRaj , You can also inherit your component from 

com.adobe.cq.wcm.core.components.models.Navigation
The functionality you are trying to achieve is already implemented here.
You can also checkout the code. But the basic think is like @DPrakashRaj said, you have to add logic in sightly to test hideInNav