Trying to Highlight the path in my navigation

Duncan Koza asked on October 10, 2019 00:05

I have created a Hierarchical navigation but the issue I am having right now is with the IsDocumentOnSelectedPath() macro. The menu I created has sub menu items but only the first item under the menu seems to test true for being on the selected path, not any others. Here is my code, perhaps one of you can see what I am doing wrong.

Header 0 - This one works great!

<ul class="nav nav-pills flex-column">

Item 0 - This one works great!

<li class="nav-item">

{% If (NodeHasChildren) { "<div class=\"d-flex justify-content-between align-items-center\">" } #%}

<a href="{% GetNavigationUrl() %}" class="nav-link sjcg-nav-link{% if (IsCurrentDocument()) { " active" } #%}" aria-expanded="{% if (IsDocumentOnSelectedPath()) { "true" } else { "false" } #%}" {% If (NodeHasChildren) { "data-toggle=\"collapse\" role=\"button\" aria-controls=\"sjcg" + NodeID + "\" data-target=\"#sjcg" + NodeID + "\"" } #%} >{% Title %}</a>

{% If (NodeHasChildren) { "<i class=\"material-icons d-block text-dark\">keyboard_arrow_right</i></div>" } #%}
{^SubLevelPlaceHolder^}

</li>

Header 1 (It fails here. I can navigation to a page that is in the path but isDocumentOnSelectedPath resolves as "false". Only the first item that gets rendered seems to work but all the other pages don't.

<div class="collapse{% if (IsDocumentOnSelectedPath()) { " show" } else { " test" } #%}" id="sjcg{% NodeParentID %}">

Item 1 - This one works great!

<a class="nav-link sjcg-nav-link py-0 mb-1 pl-3{% if (IsCurrentDocument()) { " active" } #%}" href="{% GetNavigationUrl() %}">{% Title %}</a>

Footer 1 - This one works great!

</div>

Footer 0 - This one works great!

</ul>

One other thing (so 2 questions)... I think I might have problems later with NodeHasChildren because I only want this to be true if it is of a specific page type and if it is a published child. Is that possible?

Recent Answers

Rui Wang answered on October 15, 2019 19:10 (last edited on December 10, 2019 02:31)

Hi Duncan

I had a call with Robert and saw this in action and also tried this on my local. The issue is you should not use IsCurrentDocument() method in Level 1 Head, instead it should be used in Level 0 item. You should remove L1 header and footer and combine them into L0 item like this

<li class="nav-item">

{% If (NodeHasChildren) { "<div class=\"d-flex justify-content-between align-items-center\">" } |(identity)GlobalAdministrator%}">
{^SubLevelPlaceHolder^}
</div>

</li>

0 votesVote for this answer Mark as a Correct answer

Duncan Koza answered on October 16, 2019 20:18 (last edited on December 10, 2019 02:31)

Thank you for the go to meeting Rui

I took your advice and updated my code. I just thought I'd share my code here in the event that it helps someone else.

I have removed all header and footer code in my Hierarchical viewer (Web Part)

Item 0

<li class="nav-item">

<!-- START Header of Section Navigation Item Container -->
{% If (ClassName=="custom.sjcg_PageFolder" || ClassName=="custom.sjcg_PolicyPage" || ClassName=="custom.sjcg_MedDirPage") { %}

    {% If (IsCurrentDocument()) { "<div class=\"card mb-2\">" } #%}
        <div class="d-flex justify-content-between align-items-center">

{% } |(identity)GlobalAdministrator%}</a>

Thank you, Duncan

0 votesVote for this answer Mark as a Correct answer

Duncan Koza answered on October 16, 2019 20:22

For anyone that is wondering why I am not using (NodeHasChildren), it is because many of my pages would have children like files, media libraries, etc... and I didn't want my navigation to expand when it would inevitably view those pages as children.

0 votesVote for this answer Mark as a Correct answer