How to Create Dynamic Navigation Bar in Laravel?

Hi,

This post will give you example of laravel dynamic navbar. you can understand a concept of laravel dynamic navigation bar. you'll learn how to create dynamic navbar in laravel. i would like to share with you how to create dynamic navigation menu in laravel. Let's get started with laravel navigation menu tutorial.

In this tutorial, i will give you info step by step how to create dynamic navigation menu in laravel app. you can easily use this example with laravel 6, laravel 7, laravel 8, laravel 9, laravel 10 and laravel 11 version.

Here, we will create navbars table with name, route and ordering column. We will create seeder for default navbar and then we will share navbars data using route service provide. so let's see bellow step and you will get as here screenshot after this example:

Preview:

Step 1: Create Navbar Table and Model

in first step, we need create new migration for adding "navbars" table:

php artisan make:migration create_navbars_table

database/migrations/2021_07_13_140744_create_navbars_table.php

<?php
  
use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;
  
class CreateNavbarsTable extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('navbars', function (Blueprint $table) {
            $table->id();
            $table->string('name');
            $table->string('route');
            $table->integer('ordering')->default(0);
            $table->timestamps();
        });
    }
  
    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::dropIfExists('navbars');
    }
}

now let's run migration command:

php artisan migrate

now, just create Navbar model and add code as like bellow:

app/Models/Navbar.php

<?php
  
namespace App\Models;
  
use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;
  
class Navbar extends Model
{
    use HasFactory;
  
    protected $fillable = [
        'name', 'route', 'ordering'
    ];
}

Step 2: Create Seeder

here, we will create Navbar seeder and add default links, so let's add as bellow:

php artisan make:seeder NavbarSeeder

now, update seeder code as bellow:

database/seeders/NavbarSeeder.php

<?php
  
namespace Database\Seeders;
  
use Illuminate\Database\Seeder;
use App\Models\Navbar;
  
class NavbarSeeder extends Seeder
{
    /**
     * Run the database seeds.
     *
     * @return void
     */
    public function run()
    {
        $links = [
            [
                'name' => 'Home',
                'route' => 'home',
                'ordering' => 1,
            ],
            [
                'name' => 'Products',
                'route' => 'products.index',
                'ordering' => 2,
            ],
            [
                'name' => 'About US',
                'route' => 'about.us',
                'ordering' => 3,
            ]
        ];
  
        foreach ($links as $key => $navbar) {
            Navbar::create($navbar);
        }
    }
}

now let's run seeder command:

php artisan db:seed --class=NavbarSeeder

Step 3: Share Navbar Data using ServiceProvider

In this step, we will get all navbars data and share with all views using AppServiceProvider. so let's update AppServiceProvider as like bellow:

app/Provides/AppServiceProvider.php

<?php
  
namespace App\Providers;
  
use Illuminate\Support\ServiceProvider;
use Illuminate\Pagination\Paginator;
use View;
use App\Models\Navbar;
  
class AppServiceProvider extends ServiceProvider
{
    /**
     * Register any application services.
     *
     * @return void
     */
    public function register()
    {
          
    }
  
    /**
     * Bootstrap any application services.
     *
     * @return void
     */
    public function boot()
    {
        Paginator::useBootstrap();
 
        View::composer('*', function($view)
        {
            $navbars = Navbar::orderBy('ordering')->get();
            $view->with('navbars', $navbars);
        });
    }
}

Step : Create Route

In this is step we need to create some routes for home, products and about us page.

routes/web.php

<?php
  
use Illuminate\Support\Facades\Route;
  
use App\Http\Controllers\FrontController;
  
/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| contains the "web" middleware group. Now create something great!
|
*/
Route::get('home', [FrontController::class, 'home'])->name('home');
Route::get('products', [FrontController::class, 'products'])->name('products.index');
Route::get('about-us', [FrontController::class, 'aboutUs'])->name('about.us');

Step 5: Create Controller

in this step, we need to create FrontController and add following code on that file:

app/Http/Controllers/FrontController.php

<?php
  
namespace App\Http\Controllers;
  
use Illuminate\Http\Request;
  
class FrontController extends Controller
{
    /**
     * Display a listing of the resource.
     *
     * @return \Illuminate\Http\Response
     */
    public function home()
    {
        return view('home');
    }
  
    /**
     * Display a listing of the resource.
     *
     * @return \Illuminate\Http\Response
     */
    public function products()
    {
        return view('products');
    }
  
    /**
     * Display a listing of the resource.
     *
     * @return \Illuminate\Http\Response
     */
    public function aboutUs()
    {
        return view('aboutUs');
    }
}

Step 6: Create Blade Files

here, we need to create blade files for layout, home, products and about as. so let's create one by one files:

here will code for navbar links:

resources/views/layouts/app.blade.php

<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
    <title>{{ config('app.name', 'Laravel') }}</title>
    <!-- Fonts -->
    <link rel="dns-prefetch" href="//fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet">
    <!-- Styles -->
    <link href="{{ asset('css/app.css') }}" rel="stylesheet">
</head>
<body>
    <div id="app">
        <nav class="navbar navbar-expand-md navbar-light bg-white shadow-sm">
            <div class="container">
                <a class="navbar-brand" href="{{ url('/') }}">
                    {{ config('app.name', 'Laravel') }} - Dynamic Navbar Example
                </a>
  
                <div class="collapse navbar-collapse" id="navbarSupportedContent">
                    <!-- Right Side Of Navbar -->
                    <ul class="navbar-nav ml-auto">
                        @foreach ($navbars as $navbarItem)
                            <li class="nav-item">
                                <a class="nav-link" href="{{ route($navbarItem->route) }}">{{ $navbarItem->name }}</a>
                            </li>
                        @endforeach
                    </ul>
                </div>
            </div>
        </nav>
  
        <main class="py-4">
            @yield('content')
        </main>
    </div>
</body>
</html>

resources/views/home.blade.php

@extends('layouts.app')
  
@section('content')
<div class="container">
    <div class="row justify-content-center">
        <div class="col-md-8">
            <div class="card">
                <div class="card-header">Home</div>
                <div class="card-body">
                    <p>You are in Home Page</p>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

resources/views/products.blade.php

@extends('layouts.app')
  
@section('content')
<div class="container">
    <div class="row justify-content-center">
        <div class="col-md-8">
            <div class="card">
                <div class="card-header">Products</div>
                <div class="card-body">
                    <p>You are in Products Page</p>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

resources/views/aboutUs.blade.php

@extends('layouts.app')
  
@section('content')
<div class="container">
    <div class="row justify-content-center">
        <div class="col-md-8">
            <div class="card">
                <div class="card-header">About US</div>
                <div class="card-body">
                    <p>You are in About US Page</p>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

Now we are ready to run our example and login with user. so run bellow command so quick run:

php artisan serve

Now you can open bellow URL on your browser:

localhost:8000/home

I hope it can help you...