How To Create Dynamic Nav Bar From Database In Laravel?

Hiello Artisan

In this tutorial, I will give you an example of laravel dynamic navbar. you can understand the concept of laravel dynamic navigation bar. you'll learn how to create a dynamic navbar in laravel. I would like to share with you how to create a 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 on how to create a dynamic navigation menu in laravel app. you can easily use this example with laravel 6, laravel 7, laravel 8, and laravel 9 version.

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

 

Step 1: Create Navbar Table and Model

In the first step, we need to create new migration for adding the navbars table:

php artisan make:migration create_navbars_table

 

Now update the newly created migration like below:

database/migrations/

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 the migration command:

php artisan migrate

 

Now, just create the Navbar model and add code as below:

app/Models/Navbar.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

Now in this step, I will create Navbar seeder and add default links, so let's add as below:

php artisan make:seeder NavbarSeeder

 

Now, update the seeder code as below:

database/seeders/NavbarSeeder.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 the seeder command:

php artisan db:seed --class=NavbarSeeder

 

Read also: React Redux Complete Setup Example with Api Call

 

Step 3: Share Navbar Data using ServiceProvider

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

app/Provides/AppServiceProvider.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  4 : Create Route

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

routes/web.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

We are almost to go. Now in this step, we need to create FrontController and add the following code to that file:

app/Http/Controllers/FrontController.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 the code for navbar links:

resources/views/layouts/app.blade.php

 

resources/views/home.blade.php

 

resources/views/products.blade.php

 

resources/views/aboutUs.blade.php

 

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

php artisan serve

 

Now visit the below URL to test.

 

url
localhost:8000/home

 

Read also: How To Install Vite in Laravel 9 with React Js

 

Hope it can help you.

 

#laravel #laravel-9x