Setting Bootstrap navbar active class in Laravel 5
PhpLaravelLaravel 5Php Problem Overview
I've been wondering around looking for solutions, but can't really understand especially when creating helpers. I'm new in Laravel and I want a simple or if not a detailed instruction on how to set the active class for my bootstrap navbar.
Here's what I've done so far, but can't get it done:
<div class="header clearfix">
<nav>
<ul class="nav nav-pills pull-right">
<li class=""><a href="{{ url('/') }}">Home</a>
</li>
<li {{ Request::is('about*') ? ' class="active"' : null }}><a href="{{ url('about') }}">About Us</a>
</li>
<li><a href="{{ url('auth/login') }}">Login</a>
</li>
</ul>
</nav>
<h2 class="">Tobacco Prevention and Control Program</h2>
</div>
EDIT
Setting class="active" will make all nav-pills active. The intended effect is that only the li of the current page have the active class.
Php Solutions
Solution 1 - Php
If you are working with named routes. You can use this approach in your views:
{{ Route::currentRouteNamed('about') ? 'active' : '' }}
or
{{ Route::is('about') ? 'active' : '' }}
The Illuminate\Routing\Router#is(...) is an alias of the Illuminate\Routing\Router#currentRouteNamed(...).
Solution 2 - Php
Your code is working fine, but you have to use it for every link that can be active. It is better to return only class name, not class="..." so you can add other classes.
Be careful when using * at the end (about*). If you use /* for home page then it will always be marked as active (because every other page starts with /).
<ul class="nav nav-pills pull-right">
<li class="{{ Request::is('/') ? 'active' : '' }}">
<a href="{{ url('/') }}">Home</a>
</li>
<li class="{{ Request::is('about') ? 'active' : '' }}">
<a href="{{ url('about') }}">About Us</a>
</li>
<li class="{{ Request::is('auth/login') ? 'active' : '' }}">
<a href="{{ url('auth/login') }}">Login</a>
</li>
</ul>
You can also move {{ Request::is('/') ? 'active' : '' }} to helper function/method.
Solution 3 - Php
<ul class="nav nav-second-level">
<li class="{{ Request::segment(1) === 'programs' ? 'active' : null }}">
<a href="{{ url('programs' )}}" ></i> Programs</a>
</li>
<li class="{{ Request::segment(1) === 'beneficiaries' ? 'active' : null }}">
<a href="{{url('beneficiaries')}}"> Beneficiaries</a>
</li>
<li class="{{ Request::segment(1) === 'indicators' ? 'active' : null }}">
<a href="{{url('indicators')}}"> Indicators</a>
</li>
</ul>
Solution 4 - Php
Throw this in your helper.php
function set_active($path, $active = 'active') {
return call_user_func_array('Request::is', (array)$path) ? $active : '';
}
Use it like so
<li class="{{ set_active(['about*']) }}"><a href="{{ url('about') }}">About Us</a>
You can pass a single string to a route or multiple and wildcards.
See more detail on Laravel Trick
Solution 5 - Php
solution is
<ul class="nav navbar-nav pull-right">
<li class="{{ Request::is('/') ? 'active' : '' }}">
<a href="{{ url('/') }}">Home</a>
</li>
<li class="{{ Request::is('about') ? 'active' : '' }}">
<a href="{{ url('/about') }}">About Us</a>
</li>
<li class="{{ Request::is('whyus') ? 'active' : '' }}">
<a href="{{ url('/whyus') }}">Why Us</a>
</li>
</ul>
Solution 6 - Php
Request::path() returns the request uri, for example: http://localhost/programs , will return programs, so you can do this:
<li class="{{ Request::path() == 'programs' ? 'active' : '' }}">
<a href="{{ url('programs') }}"></i> Programs</a>
</li>
Solution 7 - Php
Set a section on your blade file (let home.blade.php) like
@section('Home', 'my-active-class')
And set a section on your another blade file (let about.blade.php) like
@section('About', 'my-active-class')
and yield this section on app.blade.php (Suppose you are extending from app.blade.php)
...
<li class="@yield('Home')"><a href="#">Home</a></li>
<li class="@yield('About')"><a href="#">About</a></li>
...
Solution 8 - Php
This is simple: to get your links to be active when using bootstrap, all you need is an if statement inside the class link, for instance: i have my current url as http://example.com/home
<li class="{{ Request::url() == url('/home') ? 'active' : '' }}"><a href="/home" ></li>
Home
</a>
and you are good to go.
Solution 9 - Php
The solution given by @Daniel Antos is best answer, as I have found. Mr. Danial Antos also warned about using * at the end (about*). Because while using /* for home page then it is always marked as active (because every other page starts with /). So, I have used as follows and it worked fine for me:
{{ (Request::is('users') || Request::is('users/*') ? 'active open' : '') }}
Solution 10 - Php
I think this would be simple, and it works for me.
<li class="{{ Request::segment(1)=='vehicles' ? 'active' : '' }}">
<a href="/vehicles">Vehicles</a>
</li>
Solution 11 - Php
I found the solution:
composer require devmarketer/easynav
More details : https://github.com/DevMarketer/LaravelEasyNav
Solution 12 - Php
use
Request::is('[level]') ? 'active' : ''
In case of multilevel, use:
Request::is('[level]', '[level]/*') ? 'active' : ''
Solution 13 - Php
<ul class="nav nav-second-level">
<li class={{ Request::is('/') ? 'active' : '' }}>
<a href="{{ url('programs' )}}" ></i> Programs</a>
</li>
<li class="{{ Request::segment(1) === 'beneficiaries' ? 'active' : null }}">
<a href="{{url('beneficiaries')}}"> Beneficiaries</a>
</li>
<li class="{{ Request::segment(1) === 'indicators' ? 'active' : null }}">
<a href="{{url('indicators')}}"> Indicators</a>
</li>
</ul>
Solution 14 - Php
The Easiest way is to add class active :-
@if (request()->routeIs('dashboard'))
class="active"
@endif
Solution 15 - Php
If we manage to get the URL path, we can compare it with the routes and put an active class there.
{{'/'==request()->path()?'active':''}}
{{'about'==request()->path()?'active':''}}