Setting Bootstrap navbar active class in Laravel 5

laravel add active class to menu
laravel 5.8 active menu item
laravel 5.7 active menu item
laravel active menu item bootstrap
laravel 5.6 active menu item
laravel active class
laravel-menu
if page active laravel

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.

EDIT

For those who are visiting this post. I have managed to get a solution, but I'm not sure if it is neat. Well it's working and fine for me.

<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>

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.

Setting Bootstrap navbar active class in Laravel 5 · GitHub, Setting Bootstrap navbar active class in Laravel 5 - active.blade.php. <ul class=​"nav nav-second-level">. <li class="{{ Request::segment(1) === 'programs' ? I am using bootstrap nav bar with codeigniter as backend. Now In my application i want to change the &lt; li> class to active dynamically for each page. So i can known i am on which page currentl

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(...).

Laravel: How to Make Menu Item Active by URL/Route – Quick , Laravel: How to Make Menu Item Active by URL/Route of the most common operation on every website is to assign “active” CSS class to the menu item which is currently opened. We assume that the code will be based on Bootstrap and active menu item will have this: In real Blade, it should be this: Bootstrap Menu in Laravel using Navigation concept. Credits: Many thanks to bensound.com for Providing Royalty Free Music. How to set current Navbar Link to Active-Color in Laravel - Duration

<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>

Adding class .active to current link in Laravel 5.2, <nav class="navbar navbar-default navbar-fixed-top" role="navigation"> <div I have the bootstrap.min.js but the active link it is not working. The most concise screencasts for the working developer, updated daily. There's no shortage of content at Laracasts. In fact, you could watch nonstop for days upon days, and still not see everything!

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

How to make menu items active on different pages in Laravel , Add class of active to bootstrap menu items on different pages. Category. Education. Show moreDuration: 9:09 Posted: Mar 13, 2016 Probably one of the most common operation on every website is to assign “active” CSS class to the menu item which is currently opened. There are quite a few ways to detect that status, let’s review them.

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>

Setting Bootstrap navbar active class in Laravel 5, 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  Integrate Bootstrap Admin Template in Laravel. In this example, I will demonstrate how to integrate Cool Admin Dashboard into a Laravel app. It will thoroughly explain you how easy it is to integrate bootstrap themes in Laravel application. Here is an example illustrating the step-by-step process of integrating admin theme into an app.

Just In Case. Laravel, handling active menu item, So the best practice for me for handling active menu item is create In my project I use Bulma css framework, so active class will be 'is-active' . Nevertheless you always can define here your class name, or just give the specific class name from the Blade For example for the Bootstrap active item will be: Whats the cleanest way to add the active class to bootstrap link components? Posted 5 years ago by cullymason Every method I have ever come up with always seems like a hack.

Laravel 7.x and 6.x active menu item using request, laravel active menu item, laravel 5 active menu item, laravel 5.5 active menu item​, laravel 5 active class, active states laravel, laravel request is, laravel panel then you select theme like adminLT or any other bootstrap theme. The most concise screencasts for the working developer, updated daily. There's no shortage of content at Laracasts. In fact, you could watch nonstop for days upon days, and still not see everything!

php, php - Setting Bootstrap navbar active class in Laravel 5 - <div class="header clearfix"> <nav> <ul class="nav nav-pills pull-right"> <li class=""><a href="{{ url('/') }}  Here.. in this video.. i have done about, how to set the current page navbar link to active in laravel. (active is a class with background-color: white ) eg: if your on home page, navbar link shld

Comments
  • @krisdestruction The OP probably wants to render class="active" only on the current nav li
  • Possible duplicate of stackoverflow.com/questions/17266909/…
  • @Ajoy Okay I was just in the review queue and it just looked like it needed more clarification, that's all
  • @krisdestruction The question is not clear for someone who hasn't dealt with a similar situation before. I'll edit it now
  • I have edited your question. Feel free to remove it or modify it with your own words!
  • Best solution for when working with named routes indeed
  • I think is the best method if you using the named routes.
  • I use a similar approach but what if I have a dynamic URL id like this.. /company/7431/departments. Here I need to somehow use $company->id to represent 7431. any ideas?
  • Real solution. Especially for menus with dropdowns.
  • I had to use dot * instead of /*, so users.*
  • what about dynamic id like {{ Request::segment(1)=='vehicles.$id' ? 'active' : '' }}
  • class="{{ Request::url() == url('/home') ? 'active' : '' }}"