Skip to main content

I am trying to modify the homepage link in the _subnavigation_ menu but struggling to find where the links are being taken from. 

This is what  I see in the template file.

<nav class="np-sub-navigation">
  <div class="np-sub-navigation-content">
    {% for link in navigations.sub_navigation %}
      <div class="np-sub-navigation-content-item {{ link.active_class }}">
        <a class="np-sub-navigation-content-item-link" href="{{ link.url }}">
          <i class="{{ link.icon }} np-button-color np-sub-navigation-content-item-icon"></i>
          {{ link.label }}
        </a>
        <div class="np-sub-navigation-content-item-bar np-button-background-color"></div>
      </div>
    {% endfor %}
  </div>
</nav>

How do I prescribe fixed links for each icon?

 

TIY 🙏

Hi ​@Alistair FIeld!  The links described are the default pages that are in a school and can be access through the sub navigation. So those are the: homepage, dashboard, course catalog, ILTs, and Learning Paths. Did this help?

​@cdonargo 

I gather they are the defaults. I would like to change them.

Do you have an example of the template I could use to build hard coded links.?

Any advice here on how to change the urls in the sub navigation ?

 

​@cdonargo 

Hi ​@Alistair FIeld - I found some examples for you. 

Here’s an example of changing the label of the link. In this example, they are changing the word “Catalog” to “eLearning Modules”. This goes right under the for loop (i.e “for link in navigations” )

      <div class="np-sub-navigation-content-item {{ link.active_class }}">
        <a class="np-sub-navigation-content-item-link" href="{{ link.url }}">
          {% if link.label == 'Catalog' %}
            eLearning Modules 
            {% else %}
            {{ link.label }}
          {% endif %}
        </a>
        <div class="np-sub-navigation-content-item-bar np-button-background-color"></div>
      </div>

For changing out the urls of existing navigation items, use the href as the if statement instead of the label. So instead of link.label, you can use link.url. You can find all of that in our developer docs under Variables Reference.

 

To hard code urls as new sub navigation items, simply add the appropriate HTML block just outside of the for loop that we are using in the above example! Here’s an example. I’ve included the endfor to show the conclusion of the for loop.

    {% endfor %}
     <div id="customPage" class="np-sub-navigation-content-item np-sub-navigation-content-item-inactive">
      <a class="np-sub-navigation-content-item-link" href="/app/custom-page">
        Custom Page
      </a>
      <div class="np-sub-navigation-content-item-bar np-button-background-color"></div>
    </div>
</nav>

That closing nav tag should match whatever your first line opening tag is. Calling this out in case you changed it away from the default nav tag. 

Please note that with new sub nav items, if you want the active/inactive color and line to show up as it does with the default items, you will need to add some javascript at the bottom of the file. Here’s something you can use - please make sure you add your script tags and update the variables to match your url and id. 

 const url = window.location.pathname;
  const customPageBtn = document.querySelector('#customPage');

  if (url === '/app/custom-page') {
    customPageBtn.classList.add('np-sub-navigation-content-item-active');
    customPageBtn.classList.remove('np-sub-navigation-content-item-inactive');
  }

I hope this helps!

Thanks ​@NormRasmussen , I will give it a go.

Reply


Terms & ConditionsCookie settings