Highlight Active Link in Navbar

Bootstrap

Technical Specification

Use .active class to highlight the current page link in the navbar and ensure it looks visually different.

Input/Output Samples

Input:Home page

Output:Home link looks active

Optimal Logic Path

<li class="nav-item">
  <a class="nav-link active" aria-current="page" href="/">Home</a>
</li>

Architectural Deep-Dive

Consistency of active state helps user know where they are.