how to Highlight Current Page with Bootstrap in Laravel 5.2

Question

using Laravel 5.2. and need highlight current page link with bootstarp. this is My menus blade file

<div class="collapse navbar-collapse" id="app-navbar-collapse">
                <!-- Left Side Of Navbar -->
                <ul class="nav navbar-nav">
                    <li ><a href="{{ url('/home') }}">Home</a></li>  //menu

                     <li ><a href="{{ url('/help') }}">Help</a></li> //menu

                </ul>

                <!-- Right Side Of Navbar -->
                <ul class="nav navbar-nav navbar-right">
                    <!-- Authentication Links -->
                    @if (Auth::guest())
                        <li><a href="{{ url('/login') }}">Login</a></li>
                        <li><a href="{{ url('/register') }}">Register</a></li>
                    @else
                        <li class="dropdown">

                            <li> <a href="{{ route('projects.index') }}">Projects</a> </li> //menu



                            <li> <a href="{{ route('collaborators.index') }}">Collaborators</a> </li> //menu

what can I do? I need simple one

Answer 1

got this way

// It adds an active class when the url matches "users*"
// The * means that it doesn't matter what comes after it
<li class="{{ Request::is('users*') ? 'active' : '' }}">
    <a href="{{ route('users.index') }}">Employees</a>
</li>

Answer 2

You can define a css class and apply class to current url like this,

 <li class="{{ Request::is('home') ? 'active' : '' }}">

Update :

As you are using single page app this will work for you,

 $("ul li").click(function() {
  $('li').removeClass("active");
  $(this).addClass("active");
 });

Answer 3

You can set variables in your view files like this :

{{--*/ $nav = 'user' /*--}}

And then in your layout check this variable :

<li class="@if ($nav == 'user') active @endif">

And of course add css declarations for .active.

Answer 4

From controller pass a variable $page . So if the controller method is for page 'home' then:

function about(){
  $page = 'home';
  //rest of your code
}

and in your view:

<li ><a href="{{ url('/home') }}" class="@if ($page == 'home') active @endif">Home</a></li>

and in your css:

a.active: {
 color: red;
}