How Can I Add Active Class In Laravel On Header Items When They're Clicked?

I've been trying to get active class on my header items when they are clicked. I have a menu and my li items inside of a menu leads to specific pages on my website. Now I want to a

Solution 1:

Try the below, this is from the linked thread and https://laravel.com/docs/5.4/requests#request-path-and-method:

<div class="container">
  <div class="row">

    <div class="col-md-10 col-sm-12 col-xs-12" style="width: 43.333333% !important;position: relative;right: 1.35rem;margin-bottom: 12px;">

      <!-- Nav start -->

      <div class="navbar navbar-default" role="navigation">
        <div class="navbar-collapse collapse" id="nav-main">
          <ul class="nav navbar-nav">
            <li class="{{ request()->is('/') ? 'active' : '' }}"><a id="newmenu" style="background-color: rgba(255,255,255,0.1);" href="{{url('/')}}">{{__('Beauty treatments')}}</a> </li>
            @foreach($show_in_top_menu as $top_menu) @php $cmsContent = App\CmsContent::getContentBySlug($top_menu->page_slug); @endphp
            <li class="{{ request()->is('cms/*') ? 'active' : '' }}"><a id="newmenu" href="/demo/public/jobs?country_id%5B%5D=231">{{__('Hair')}}</a> </li>
            @endforeach

            <li class="{{ request()->is('/') ? 'active' : '' }}"><a id="newmenu" href="{{url('/')}}">{{__('Hands')}}</a> </li>
            <li class="{{ request()->is('/') ? 'active' : '' }}"><a id="newmenu" href="{{url('/')}}">{{__('Spa Services')}}</a> </li>

          </ul>

          <!-- Nav collapes end -->

        </div>
        <div class="clearfix"></div>
      </div>

      <!-- Nav end -->

    </div>
  </div>

  <!-- row end -->
</div>

Solution 2:

I usually go the way of setting a variable like the comment above and handle this through the middleware in Laravel - https://laravel.com/docs/5.7/middleware.

I create a middleware using artisan and ensure the routes go through it.

php artisan make:middleware ActiveNav

// routes/web.php
Route::group(['middleware' => 'active.nav'], function () {
    Route::get('/', 'HomeController@index');
    Route::get('/contact', 'ContactController@index');
    Route::get('/blog', 'BlogController@index');
});

Register the middleware in kernel.php (notice the last line in the array)

// app/Http/Kernel.php
protected $routeMiddleware = [
    'auth' => \App\Http\Middleware\Authenticate::class,
    'auth.basic' => \Illuminate\Auth\Middleware\AuthenticateWithBasicAuth::class,
    'bindings' => \Illuminate\Routing\Middleware\SubstituteBindings::class,
    'cache.headers' => \Illuminate\Http\Middleware\SetCacheHeaders::class,
    'can' => \Illuminate\Auth\Middleware\Authorize::class,
    'guest' => \App\Http\Middleware\RedirectIfAuthenticated::class,
    'signed' => \Illuminate\Routing\Middleware\ValidateSignature::class,
    'throttle' => \Illuminate\Routing\Middleware\ThrottleRequests::class,
    'verified' => \Illuminate\Auth\Middleware\EnsureEmailIsVerified::class,
    'active.nav' => \App\Http\Middleware\SetActiveNav::class,
];

I then check the route in the middleware and set a variable which I share with the Views

// app/Http/Middleware/ActiveNav.php
public function handle($request, Closure $next)
{
    $active['home']     = '';
    $active['contact']  = '';
    $active['blog']     = '';

    $route = $request->getPathInfo();

    switch(true) {
        case(strstr($route, '/blog')) :
            $active['blog'] = 'active';
            break;
        case(strstr($route, '/contact')) :
            $active['contact'] = 'active';
            break;
        default:
            $active['home'] = 'active';
    }

    \View::share('active', $active );

    return $next($request);
}

}

Then I check in the nav:

// nav.blade.php
<li class="nav-item ">
    <a class="nav-link {{$active['home']}} btn" href="/">Home</a>
</li>
<li class="nav-item">
    <a class="nav-link {{$active['blog']}}" href="/blog">Blog</a>
</li>
<li class="nav-item">
    <a class="nav-link {{$active['contact']}}" href="/contact">Contact</a>
</li>

You can use middleware whenever you need to run a certain function on a route (or a group of routes). Also no JS required this way :)

Solution 3:

You can simply create a custom helper method inside a helper file:

if(!function_exists('is_active_menu')){

    function is_active_menu($url){

        return \Route::is($url) ? 'active' : '';
    }

}

and then use :

<li class="list-item {{ is_active_menu('home') }} ">Men</li>

You can use wildcards like home* in is() function.

Solution 4:

You can use is method of request function The is method allows you to verify that the incoming request path matches a given pattern. For example:

• If your url is www.yourdomain.com

<li class="{{request()->is('/') ? 'active' : ''}}"></li>

• If yur url is www.yourdoamin.com/page1

<li class="{{request()->is('page1') ? 'active' : ''}}"></li>

• If yur url is www.yourdoamin.com/page1/category1

<li class="{{request()->is('page1/category1') ? 'active' : ''}}"></li>

• You may use the * character as a wildcard.

  www.yourdomain.com/page1/category1

<li class="{{request()->is('page1/*') ? 'active' : ''}}"></li>

• www.yourdomain.com/page1/category1/subcategory1

<li class="{{request()->is('page1/*') ? 'active' : ''}}"></li>

Docs https://laravel.com/docs/5.8/requests