CODEWITHSUNDEEP
phptwitter-bootstraplaravel
Bablu Ahmed
Bablu Ahmed

Reputation: 5020

how to set Bootstrap navbar active class in one page website in Laravel 5.5

I am looking for solutions, but can't really understand. I'm new in Laravel and I want a simple instruction on how to set the active class in the bootstrap navbar on a one-page website.

Here's what I've done so far, but can't get it done:

<div id="navbar" class="navbar-collapse collapse">
        <ul class="nav navbar-nav">
            <li class="{{Request::is('/')?'active':''}}"><a href="{{ url('/') }}">Home</a></li>
            <li class="{{Request::is('#about')?'active':''}}"><a href="{{ url('#about') }}">About</a></li>
            <li class="{{Request::is('#contact')?'active':''}}"><a href="{{ url('#contact') }}">Contact</a></li>
        </ul>
    </div>

Upvotes: 0

Views: 3923

Answers (5)

Aleksey Igoshev
Aleksey Igoshev

Reputation: 11

bootstrap 5.0

$(function() {
    let pathname = window.location.pathname
    let navItem = $( ".nav-item" )
    navItem.find(".active").removeClass("active");
    navItem.find(`[href="${pathname}"]`).addClass("active");
});

Upvotes: 0

BDesh
BDesh

Reputation: 168

You can try like this using jQuery:

<!--Active class on click-->
$(document).ready(function(){
    $('.nav li').click(function(){
        $('.nav li').removeClass('active');
        $(this).addClass('active');
    });
});

Upvotes: 2

Yosef
Yosef

Reputation: 442

You can do this by using named routes ->name('');

and in your navbar just add {{ Route::currentRouteNamed('') ? 'active' : '' }}

this is how your route should look I'm using dummy names for the example

Route::get('/test', 'testController@index')->name('test.dashboard');

this is how your link should look

<li class="{{ Route::currentRouteNamed('test.dashboard') ? 'active' : '' }}"><a href="{{ route('test.dashboard') }}">Test Dashboard</a></li>

Upvotes: 1

sam
sam

Reputation: 5599

The fragment of a URL is only available client side, it is not sent to the server when a request is made, for example, if you make a request to:

https://example.com/example#example

The server will only know that you made the following request:

https://example.com/example

Therefore, if you would like to display the current active page in your single page application, you will need to make use of Javascript.

The easiest way to do this would be to listen for changes to the URL fragment (the hash in Javascript) and then add the class active to the element with the hash as its href.

  1. Add the class active to the element that should be highlighted when default when the page loads (in this case, home).

    <div id="navbar" class="navbar-collapse collapse">
    <ul class="nav navbar-nav">
        <li><a class="active" href="/">Home</a></li>
        <li><a href="#about">About</a></li>
        <li><a href="#contact">Contact</a></li>
    </ul>
</div>

  2. Add Javascript to listen to the hashchange event, and when that event happens you remove active from the current navigation item and add active to the newly selected navigation item, like so:

    <script type="text/javascript">
  window.addEventListener('hashchange', function(){
    document.querySelector('.active').classList.remove('active');
    document.querySelector('[href="'+window.location.hash+'"]').classList.add('active');
  });
</script>

Upvotes: 2

Mauricio Rodrigues
Mauricio Rodrigues

Reputation: 807

Inside of your controller you can pass a active variable with name of the active page/menu.

eg.

// Your controller class...
class SiteController extends Controller
{
    public function index()
    {
       // your logic here...
       $current = 'blog';

      return view('site.index', compact('current'));
    }
}

And in your menu:

<a href="#" class="{{ $current == 'blog' ? active : '' }}">Blog</a>

Or... A another alternative is directly in your view you capture a url segment from the current page/url existing in Request Class.

eg.

<a href="#" class="{{ Request::segment(1) == 'blog' ? active : '' }}">Blog</a>

The two ways will work. But, for me, the first option is more elegant and can be complemented with the View::composer() to share data with specific or all views.

Upvotes: 1

Related Questions