How to Add Active Class Dynamically in Laravel

Hi Developers,

Lets see How to Add Active Class Dynamically in Laravel, In this tutorial we see the most common way to Add active class dynamically in laravel. It is a quick and simple way to solve it. While creating the websites using laravel we basically use same layout blade file for all the pages, So its tricky to add separate active class for the navbar to overcome this we will follow the most common and simple solution to achieve this. Simply while returning the blade file in the controller function we will also add a new variable and call the view along with the variable using the compact() function. Then in the blade file depending on the data in the variable we will determine which one should be active by using @if ... @endif so lets see How to Add Active Class Dynamically in Laravel.

Elevate your Laravel web development with our tutorial on dynamically adding active classes. Learn to create responsive navigation that dynamically highlights the active route, enhancing user experience and navigation intuitiveness in your applications.

In the Controller File,

We are sending the variable data in the name of active using compact()

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

class UserController extends Controller
{
  
    public function index()
    {        
        $active = "index";               
        return view('index')->with(compact('active'));
    }
}

In the Blade File,

We are using the blade directives @if .... @endif inside the class attribute of the li tag to check the data in the variable $active

<ul>
    <li class="@if ($active == 'index') active @endif">
        <a href="{{ route('index') }}">Home</a>
    </li>
   <li class="@if ($active == 'about') active @endif">
        <a href="{{ route('about') }}">About</a>
    </li>   
</ul>

Recent Posts