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

Forum|Forum|2 years ago
July 25, 2023
3 replies
2036 views

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

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.

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.

Best answer by DPrakashRaj

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>

kaikubad

New Participant

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

Ekhlaque

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>

DPrakashRajAccepted solution

New Participant

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>

Sign up

Login with SSO

Login to the community

Login with SSO

Scanning file for viruses.

This file cannot be downloaded