Highlight Currently Selected Menu Item Angular Routing Example

In this article we’ll see how to highlight the currently selected menu item when using Angular routing and routerLink.

Note that Angular example shown here uses Angular 9 and Bootstrap 4.

RouterLink Directive in Angular

Angular RouterLink directive tracks whether the linked route of an element is currently active, it allows you to specify one or more CSS classes to add to the element when the linked route is active.

You can assign a CSS class as given below-

routerLinkActive="CSS_CLASS"

You can specify more than one CSS class using a space-separated string or an array.

routerLinkActive="CSS_CLASS1 CSS_CLASS2"

or

[routerLinkActive]="['CSS_CLASS1', 'CSS_CLASS2']"

Highlight currently selected menu item – Angular + Bootstrap example

In Bootstrap framework there is a CSS class active that can be used with routerLinkActive for the purpose of highlighting the selected menu item. Here is an example menu code.

<nav class="navbar navbar-expand-md bg-dark navbar-dark">
  <div class="container-fluid">
    <div class="collapse navbar-collapse" id="collapsibleNavbar">
      <ul class="nav navbar-nav">
        <li class="nav-item" routerLinkActive="active">
          <a class="nav-link" routerLink="/home">Home</a>
        </li>
        <li class="nav-item" routerLinkActive="active">
          <a class="nav-link" routerLink="/account">Accounts</a>
        </li>
        <li class="nav-item" routerLinkActive="active">
          <a class="nav-link" routerLink="/service">Services</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

• For complete example refer this post Angular Routing Concepts With Example.

That's all for this topic Highlight Currently Selected Menu Item Angular Routing Example. If you have any doubt or any suggestions to make please drop a comment. Thanks!

>>>Return to Angular Tutorial Page

---

Related Topics

1. Path Redirection in Angular Routing
2. Using RouterLinkActiveOptions to Fix Link Highlighted Problem
3. Navigate to a Route Programmatically in Angular
4. Nested Route (Child Route) in Angular
5. Angular Two-Way Data Binding With Examples

You may also like-

1. Angular Custom Two-Way Data Binding
2. Angular @Input and @Output Example
3. Angular - Call One Service From Another
4. Creating New Component in Angular
5. Pre-defined Functional Interfaces in Java
6. Difference Between StackOverflowError and OutOfMemoryError in Java
7. Writing a File Asynchronously Java Program
8. Passing Arguments to getBean() Method in Spring