How to hide a particular page in navigation | Hide in Navigation | Community
Skip to main content
sanchay1
Level 2
Jul 25, 2023 4:33 PM UTC
Solved

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

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.
DPrakashRaj
DPrakashRajAccepted solution
New Participant
Jul 25, 2023 4:51 PM UTC

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 reply

3 replies

kaikubad
kaikubad
New Participant
Jul 25, 2023 5:52 PM UTC

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
 
Translate
    Ekhlaque
    Ekhlaque
    Employee
    Jul 25, 2023 5:46 PM UTC

    @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>

     

    Translate
      DPrakashRaj
      DPrakashRajAccepted solution
      New Participant
      Jul 25, 2023 4:51 PM UTC

      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>

      Translate
        Terms & ConditionsAccessibility statement

        Loading footer...