How to Add Active Class Dynamically in Laravel 11

Hello, laravel web developers! In this article, we'll see how to add an active class dynamically in laravel 11. Here, we'll learn about adding an active class on the active menu in laravel 11. You can add an active class on an active URL in laravel 11.

Add active class to a navigation menu based on URL.

Laravel 11 Active Menu Example

In this step, we'll define the routes into the web.php file.

routes/web.php

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');

Now, we'll add an active class dynamically based on the URL.

<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>

Now, add CSS for the active class.

.active {
    background-color: #ddd;
    color: #fff;
}

You might also like:

• Read Also: Laravel 8 Toastr Notifications Example
• Read Also: Laravel 11 Spatie Media Library Example
• Read Also: How to Create Login and Registration in Laravel 11
• Read Also: Laravel 11 Create CRUD Operation with Database