How to Add Active Class Dynamically in Laravel

In this guide, I will illustrate how to dynamically add an active class in Laravel. Specifically focusing on Laravel 10, I'll provide a straightforward example of adding an active class to a menu, enhancing your understanding of the Laravel request method's is() function. Follow along as we delve into the details of implementing an active class dynamically based on the current route, offering a practical demonstration of the request is() method in Laravel. Let's explore this topic to optimize your website's navigation with ease.

In Laravel, the dynamic addition of an active class to elements, such as menu items or links, is achievable based on the current route or page being visited. This functionality aids in highlighting the active link or menu item within your navigation, providing users with a clearer understanding of their current location on your website.

Here's a demonstration illustrating how to dynamically apply an active class to a menu item in Laravel using Blade templates and the request() function:

Step 1: Add Routes

First, ensure that you have a route configured in your web.php file (or routes file) using the route helper:

Route::get('/home', 'HomeController@index')->name('home');
Route::get('/about-us', 'HomeController@aboutUS')->name('aboutUS');
Route::get('/contact-us', 'HomeController@contactUS')->name('contactUS');
Route::get('/pricing', 'HomeController@pricing')->name('pricing');

Step 2: Add Active Class Dynamically

Create a Blade view that includes your navigation menu, such as layouts/app.blade.php:

...
<ul>
    <li class="{{ request()->is('home*') ? 'active' : '' }}">
        <a href="{{ route('home') }}">Home</a>
    </li>
    <li class="{{ request()->is('about-us') ? 'active' : '' }}">
        <a href="{{ route('aboutUS') }}">About US</a>
    </li>
    <li class="{{ request()->is('contact-us') ? 'active' : '' }}">
        <a href="{{ route('contactUS') }}">Contact US</a>
    </li>
    <li class="{{ request()->is('pricing') ? 'active' : '' }}">
        <a href="{{ route('pricing') }}">Pricing</a>
    </li>
</ul>
...

In this instance, we utilize the request()->is('pattern') function to assess whether the current URL corresponds to a specific pattern. If there's a match, the 'active' class is appended to the <li> element.

Step 3: Add Active Class CSS

Define your 'active' class in your CSS; for instance, within your CSS file (e.g., styles.css), you can include:

.active {
    background-color: #3498db;
    color: #fff;
    /* Add any styles you want for the active menu item */
}

Ensure to link your CSS file to your Blade template.

Now, when you visit the "home" route, the "Home" menu item will have the 'active' class, and the CSS styles specified in your CSS file will be applied.

Repeat the same process for other menu items or links in your navigation menu. The request()->is('pattern') function allows you to match patterns to determine which menu items should be marked as active.

Ensure to adjust the route names and URL patterns to match your application's routes and structure.

I hope this guidance proves helpful for you.