Coding Challenges / Navbar / Easy

Highlight Active Link in Navbar

EasyNavbarNavbarActive State

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

Examples

Input: Home page
Output: Home link looks active

Solution

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

Explanation

Consistency of active state helps user know where they are.

← Back to all challenges