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](https://stackoverflow.com/questions/50728027/angularjs-highlight-anchor-tag-when-click) — Awais, Feb 19 '20 at 10:51

Richard Lovell · Accepted Answer · 2020-02-19T10:21:33.627

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 '20 at 10:21

answered Feb 19 '20 at 10:12

Richard Lovell

848
10
18

Navbar item highlight

1 Answers1