How to Highlight Active Menu Item in Laravel

1 year ago admin Laravel

In today's lesson, we are going to see how to add an active class to the Bootstrap 5 menu item in Laravel.


Highlight the active menu item in laravel

So let's assume that we have a navbar menu and when the user moves between the links the active link is highlighted.

To do that use the code below:

                                                    
                                                                                                                
<nav id="sidebarMenu" class="col-md-3 col-lg-2 d-md-block bg-light sidebar">
    <div class="position-sticky pt-3">
        <ul class="nav flex-column">
            <li class="nav-item">
                <a class="nav-link @if(request()->routeIs('admin.index')) active @endif" aria-current="page" href="{{route('admin.index')}}">
                    <i class="fas fa-dashboard"></i>
                    Dashboard
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link @if(request()->routeIs('admin.tags.index')) active @endif" aria-current="page" href="{{route('admin.tags.index')}}">
                    <i class="fas fa-tag"></i>
                    Tags
                </a>
            </li>
        </ul>
    </div>
</nav>

Related Tuorials

How to Build a Shopping Cart in Laravel 12 (Step-by-Step) Part 3

In the third part of this tutorial, we will display the products on the home page and add, update, a...


How to Build a Shopping Cart in Laravel 12 (Step-by-Step) Part 2

In the second part of this tutorial, we will add the controllers we need with the function...


How to Build a Shopping Cart in Laravel 12 (Step-by-Step) Part 1

In this tutorial, we will Learn how to create a fully functional shopping cart in Laravel 12. The us...


How to Add a Relationship to a Select in Filament

In this lesson, we will see how to add a relationship to a select in Filament.Let's assume that we h...


How to Generate Slugs from a Title in Filament

In this lesson, we will see how to generate slugs from a title in Filament, Sometimes we need to gen...


How to Change the Order of the Filament Left Navigation Menu Items

In this lesson, we will see how to change the order of the filament left navigation menu items.Somet...


How to Hide the Info Widget on the Filament Dashboard

In this lesson, we will see how to hide the info widget on the Filament dashboard. The info widget i...


How to Add Bootstrap 5 to Laravel 12 with Vite

In this tutorial, we will see how to add Bootstrap 5 to Laravel 12 with Vite, The process is simple...


How to Add Middleware in Laravel 12

In this tutorial, we will see how to add middleware in Laravel 12, Now we can use bootstrap/app.php...


How to Add React js to Laravel 12 with Vite

In this tutorial, we will see how to add React JS to Laravel 12 with Vite. Since version 9.19, Larav...