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
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.
Hope it can help you.
#laravel #laravel-9x