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

[sanchay1]

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.

[DPrakashRaj · Accepted solution]

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>

[Ekhlaque]

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

[kaikubad]

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