Adding class .active to current link in Laravel 5.2 This is my html:
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="#">My Blog Site</a>
</div>
<div class="collapse navbar-collapse navbarCollapse">
<ul class="nav navbar-nav">
<li class="active"><a href="{{ route('blogs.index') }}">Blogs</a></li>
<li><a href="{{ route('blogs.create') }}">Create</a></li>
</ul>
</div>
</div>
</nav>
I have the bootstrap.min.js but the active link it is not working. Then I tried to do the trick with jquery:
$(document).ready(function() {
$(".nav a").on("click", function(){
$(".nav").find(".active").removeClass("active");
$(this).parent().addClass("active");
});
});
but when I click the link the class .active is added but then it goes away. The jquery works, I'm not sure if in Laravel is done different. Thanks.
I tried:
<li class="{{ Request::path() == 'blogs/create' ? 'active' : '' }}">
<a href="{{ route('blogs.create') }}">Create</a>
</li>
and works fine with /blogs/create but if I go to blogs/1 it doesn't get the class .active.
I added this to my helpers.php:
/**
* Return nav-here if current path begins with this path.
*
* @param string $path
* @return string
*/
function setActive($path)
{
return Request::is($path . '*') ? ' class=active' : '';
}
Then call it in my templates like this:
@can ('manage-users')
<li{{ setActive('admin/users') }}>
<a href="{{ url('admin/users') }}"><i class="fa fa-fw fa-user"></i> Users</a>
</li>
<li{{ setActive('admin/groups') }}>
<a href="{{ url('admin/groups') }}"><i class="fa fa-fw fa-group"></i> Groups</a>
</li>
@endcan
helpers.php? Sorry, which one?
I created a helpers.php class in /app, then loaded it globally in composer.json:
"autoload": {
"classmap": [
"database"
],
"files": [
"app/helpers.php"
],
"psr-4": {
"App\\": "app/"
}
},
don't forget to run composer dump-autoload after you have added the helpers file to your composer.json
You were almost there :
<li class="{{ Request::is('blogs*') ? 'active' : '' }}">
<a href="{{ route('blogs.create') }}">Create</a>
</li>
every url starting with blogs will active this link.
I just found a great package from Dwight Watson called Active: https://packagist.org/packages/watson/active
You only need to run the package through Composer and add the service provider in your config/app.php file.
For the html you do something like this:
<ul class="nav navbar-nav">
<li class="{{ active('blogs.index') }}">
<a href="{{ route('blogs.index') }}">Blogs</a>
</li>
<li class="{{ active(['blogs.create', 'blogs/*']) }}">
<a href="{{ route('blogs.create') }}">Create</a>
</li>
</ul>
@mmonkey Reply is the best approach you can use. Works like a charm for me. Thanks
This is how I am managing for my websites.
<li class="{{ str_contains(Route::currentRouteAction(), [ 'App\\Http\\Controllers\\Admin\\ColorController@' ]) ? 'active' : '' }} ">
<a href="{{ URL::action('Admin\ColorController@index') }}"><i class="fa fa-circle-o text-red"></i> <span>Colors</span></a>
</li>
So How did you slove it? Or is is solved at all? It is something simular I'm trying to atm.
this is a very complete response and a great intro to using helpers as well. It works like a charm for a static menu or even for a dynamic one generated from a database query. Highly recommended. Thank you for sharing
I have created a simple but fun and easy to use package named Active which can solve your problem and maybe more...
I will be glad to see your comments.
Link of the package:
https://github.com/tuytoosh/active
Please sign in or create an account to participate in this conversation.