Navbar item highlight

Question

I have a question regarding navbars. I want to highlight a navbar item when I clicked an item but I don't know if I need to use angular or css for that. Can you guide me a little bit, please?

   <div class="collapse navbar-collapse" id="navbarNav">
      <ul class="navbar-nav">
        <li class="nav-item">
          <a routerLink="/tasks" class="nav-link" href="#">Tasks</a>
        </li>
        <li class="nav-item">
          <a routerLink="/newTask" class="nav-link" href="#">New task</a>
        </li>
        <li class="nav-item">
          <a routerLink="/users" class="nav-link" href="#">Users</a>
        </li>
        <li class="nav-item">
          <a routerLink="/newProject" class="nav-link" href="#">New Project</a>
        </li>
      </ul>
    </div>

Does this answer your question? AngularJS Highlight anchor tag when click — Awais
– Awais, Commented Feb 19, 2020 at 10:51

Richard Lovell · Accepted Answer · 2020-02-19 10:21:33Z

0

You can use routerLinkActive which will add a css class that you can use for styling. So in the following code if the current route is /newProject the list item will be styled according to your active css class:

<li routerLinkActive="active">
  <a routerLink="/newProject" class="nav-link" href="#">New Project</a>
</li>

More information on routerLinkActive here.

edited Feb 19, 2020 at 10:21

answered Feb 19, 2020 at 10:12

Richard Lovell

88810 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Navbar item highlight

1 Answer 1

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Linked

Related