How to highlight a current menu item?

How to Highlight a Current Menu Item

So you have a menu on your website or application, and you want to highlight the current menu item to provide a better user experience. You want users to easily identify which page they are currently on, without having to guess or search for it. No worries, we've got you covered!

The Problem

The challenge here is to dynamically apply an active class to the link that corresponds to the current page. In the provided context, the menu is built using HTML and AngularJS, and each menu item has a corresponding controller. The goal is to bind the active class to the controllers so that the menu item gets highlighted when its respective page is active.

The Solution

Luckily, there are a couple of straightforward solutions to achieve this. Let's explore two popular approaches:

Approach #1: ng-class Directive

AngularJS provides a handy directive called ng-class that allows us to conditionally apply classes to elements. We can leverage this directive to dynamically add the active class to the current menu item based on the current page.

1. First, make sure you have included the AngularJS library in your project.

2. Next, add the ng-class directive to the menu item link element. In this case, it would be something like:

<ul>
  <li><a ng-class="{active: isActive('/tasks')}" href="/tasks">Tasks</a></li>
  <li><a ng-class="{active: isActive('/actions')}" href="/actions">Actions</a></li>
</ul>

1. In your AngularJS controller, define the isActive function to determine whether a particular menu item should be active:

app.controller('YourController', function($location) {
  this.isActive = function(route) {
    return route === $location.path();
  };
});

1. The isActive function compares the route parameter with the current path retrieved from $location.path(). If they match, it returns true, triggering the addition of the active class to the respective link.

Approach #2: Custom Controller Logic

If you prefer not to modify your HTML, an alternative solution is to handle the class assignment directly within your controllers.

1. Follow steps 1 and 2 from the previous approach.

2. In your AngularJS controller, access the current path using $location.path(). Compare it with the path associated with each menu item and assign a true or false value to a variable indicating if the item should be active.

app.controller('YourController', function($location) {
  this.isTasksActive = function() {
    return $location.path() === '/tasks';
  };

  this.isActionsActive = function() {
    return $location.path() === '/actions';
  };
});

1. In your HTML, use the variable in an ng-class directive to conditionally apply the active class:

<ul>
  <li><a ng-class="{active: yourCtrl.isTasksActive()}" href="/tasks">Tasks</a></li>
  <li><a ng-class="{active: yourCtrl.isActionsActive()}" href="/actions">Actions</a></li>
</ul>

Conclusion

By following either of the above approaches, you can successfully highlight the current menu item in your AngularJS application. Users will appreciate the improved navigation experience, making it crystal clear which page they are currently on.

Remember, enhancing user experience is essential, and highlighting the current menu item is just one way to achieve it. Keep exploring and implementing additional user-friendly features to create an exceptional web or app experience!

Share your success stories or any other suggestions in the comments below. Happy coding! ✨🚀