How to add active class to menu item in laravel

Created at 18-Apr-2021 , By samar

How to add active class to menu item in laravel

In this session, we will try our hand at solving the "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

If you like what you are reading, please consider buying us a coffee ( or 2 ) as a token of appreciation.

Buy Me A Coffee

Don't forget to share this article! Help us spread the word by clicking the share button below.

We appreciate your support and are committed to providing you valuable and informative content.

We are thankful for your never ending support.