How to add active class to menu item in laravel
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.
If you like what you are reading, please consider buying us a coffee ( or 2 ) as a token of appreciation.
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.
Random Code Snippet Queries: Laravel
- Php artisan make model, factory, migration and controller in single command
- How to add foreign key in laravel using migration
- Delete file from amazon s3 bucket using Laravel
- SQLSTATE[42000]: Syntax error or access violation: 1055
- SQLSTATE[42S21]: Column already exists: 1060 Duplicate column name 'user_id'
- Run artisan command to generate key in laravel
- SQLSTATE[23000]: Integrity constraint violation: 1022 Can't write; duplicate key in table
- How to call model in blade laravel
- If condition in foreach loop in laravel
- Argument 1 passed to App\Http\Controllers\Auth\LoginController::authenticated() must be an instance of App\Http\Controllers\Auth\Request
- Create records using relationship in laravel
- Class 'App\Http\Controllers\User' not found
- Connection could not be established with host smtp.gmail.com :stream_socket_client(): unable to connect to tcp://smtp.gmail.com:587 (Connection refused)"
- Argument 1 passed to Symfony\Component\HttpFoundation\Response::setContent() must be of the type string or null, object given
- Get latest record by created at in Laravel
- How to get selected categories on edit record with Select2
- Laravel form request validation
- How to upload local Laravel project to server ?
- Docker important commands to run laravel application with docker
- How to customize pagination view in laravel
- Trying to get property 'title' of non-object
- Root composer.json requires php ^7.3 but your php version (8.0.0) does not satisfy that requirement
- Method Illuminate\Database\Eloquent\Collection::appends does not exist
- How to get all posts which contains comments in laravel
- Laravel save object to database