DEV Community

Amir Haghi
Amir Haghi

Posted on • Edited on

11 1

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.

Speedy emails, satisfied customers

Postmark Image

Are delayed transactional emails costing you user satisfaction? Postmark delivers your emails almost instantly, keeping your customers happy and connected.

Sign up

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more