DEV Community

Amir Haghi
Amir Haghi

Posted on • Edited on

Make a simple nav-bar with Laravel and Bootstrap

Bootstrap has it's own component to make navbar and you can see that here. In this tutorial we want to show how to use it in Laravel.
First of all you have to include bootstrap's CSS file in your project. if you want to use JS features it is required to use JS file also.
lets create some routes in laravel:

Route::view('/', 'home')->name('home');
Route::view('/about', 'about')->name('about);
Route::view('/contact', 'contact')->name('contact');
Enter fullscreen mode Exit fullscreen mode

In views you can @include() nav-bar view like this:

@include('nav-bar') 
Enter fullscreen mode Exit fullscreen mode

now lets create the nav-bar.blade.php for navbar you can use the default nav bar of bootstrap.
and generate links like this:

<li class="nav-item">
    <a class="nav-link @if(Route::currentRouteName() == 'home') active @endif" href="{{ route('home') }}">Home</a>
</li>

Enter fullscreen mode Exit fullscreen mode

As you can see for making active routes bold you have to write a complicated code like this:

@if(Route::currentRouteName() == 'home') active @endif 
Enter fullscreen mode Exit fullscreen mode

Easier way to activate links in Laravel

For making links active you can use the Active package and it really makes your code easy and instead of using above code you can write this:

@active('home') 
Enter fullscreen mode Exit fullscreen mode

You can find the package here. I hope it helps you.

Top comments (0)