How to add active class to menu item in laravel

• Add active class to menu on visit a specific url

  --PATH resources\views\<yourfile>.blade.php

  <li class="nav-item @if (\Request::is('curent-page-url-without-domain-name')) active  @endif">
  <li class="{{ (request()->is('curent-page-url-without-domain-name')) ? 'active' : '' }}"> 
  

  If you want to add active class to the menu item in laravel on visit a specific url then you can use this code snippet in your blade file. This code snippet checks if the visited url is equal to the passed url to the \Request::is() method then it adds the active class to it.

• Add active class to menu item on starting url with wildcard url segments

  --PATH resources\views\<yourfile>.blade.php

  <!-- It will add class to menu on visit (/article/random-slug) page url  -->
  <li class="nav-item @if(\Request::is('article/*') ) active  @endif">
  
  <!-- It will add class to menu on visit (/article ) and details page like (article/random-slug) page url -->
  <li class="nav-item @if (\Request::is('article*')) active  @endif">
  <li class="{{ (request()->is('article*')) ? 'active' : '' }}">
  

  This code snippet add the active class to menu item which have the starting url article/ which we want and the rest will be wildcard url segments, like article/how-to-add-number , article/javascript-element-selector. It will add a class active to the article tab if you visit the first url or the second url in you web browser.

• Add active class on matching url segment

  --PATH resources\views\<yourfile>.blade.php

  <li class="nav-item {{ (request()->segment(1) == 'article') ? 'active' : '' }}">
  <li class="nav-item {{ (\Request::segment(1) == 'article') ? 'active' : '' }}">
  

  You can add an active class to the menu item on matching the url segment. \Request::segment(1) is the method which returns the value passed in the url basic on 0,1,2, ... and matches the value we assign after the (==) conditional operator. If the value matches then it adds the class active to the menu item.

• Add active class on matching route by name

  // routes/web.php
  Route::middleware(['auth'])->prefix('admin')->name('admin.')->group(function() {
      Route::resource('posts', 'Admin\PostController');
  });
  
  <!-- resources/views/<yourfile>.blade.php -->
  <li class="{{ (strpos(Route::currentRouteName(), 'admin.posts') == 0) ? 'active' : '' }}">
  

  This code snippet helps you to add an active class using route name in your view file. This is the most recommended way to add active class to menu item because sometimes we need to change the url and after the change of url we don’t have to do anything in the view file.

  It will add active class to a menu item on visit all urls assigned to our resourceful controller, like /admin/posts, /admin/posts/create, /admin/posts/1/edit.

• Add active class to menu using helper method

  // app\Http\helpers.php
  
  function set_active($route) {
      if( is_array($route) ){
          return in_array(Request::path(), $route) ? 'active' : '';
      }
      return Request::path() == $route ? 'active' : '';
  }
  
  <!-- resources/views/<yourfile>.blade.php -->
  <li class="{{ set_active('admin/users') }}">
  
  // composer.json
  
  "autoload": {
          "files": [
              "app/Http/helpers.php"
          ],
  

  You can add an active class to the menu item using the helpers method which is defined in your helpers.php file. After the function definition you have to add this file path in your composer.json file and generate the autoload files using composer dump-autoload command.

  After composer dump-autolaod command the helpers autoload file will be generated. You can use helpers method set_active() in your view file.

Back to code snippet queries related laravel