CODEWITHSUNDEEP
vmware-clarity
Mooihoek
Mooihoek

Reputation: 11

Clarity UI Sub Navigation

I'm using the below code for the sub navigation in app.component.html, however after selecting a subnav link which does go to next page the selection does not stay highlighted, just the home TAB. What am I missing? 

> <nav class="subnav">

  <ul class="nav">
    <li class="nav-item">
      <a class="nav-link active" href="/home">Home</a>
    <li class="nav-item">
      <a class="nav-link" href="/dashboards">Dashboards</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="/tools">Tools</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="/faqs">FAQs</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="/about">About</a>
    </li>
  </ul>
</nav>

Upvotes: 1

Views: 954

Answers (2)

Jeremy Wilken
Jeremy Wilken

Reputation: 6976

The active class, which is hard coded in your sample to only be on the Home link. Since it is Angular, you should adapt the anchor tags like you would for any Angular links. It should be something like this if you use Angular with the subnav.

<nav class="subnav">
  <ul class="nav">
    <li class="nav-item">
      <a class="nav-link" routerLink="/home" routerLinkActive="active">Home</a>
    <li class="nav-item">
      <a class="nav-link" routerLink="/dashboards" routerLinkActive="active">Dashboards</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" routerLink="/tools" routerLinkActive="active">Tools</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" routerLink="/faqs" routerLinkActive="active">FAQs</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" routerLink="/about" routerLinkActive="active">About</a>
    </li>
  </ul>
</nav>

Upvotes: 2

Massimo Costa
Massimo Costa

Reputation: 1860

if you're using Angular router you have to put 

routerLinkActive="active"

in each link

Check here

Upvotes: 3

Related Questions