Introduction to Designing Dynamic Menus Based on User Roles and Permissions in Laravel 11 with Bootstrap 5.3
When building web applications with Laravel 11 and Bootstrap 5.3.3, one of the most common challenges developers face is designing dynamic menus based on user roles and permissions. A role-based menu ensures that users only see the content and navigation options they are authorized to access. This is essential for creating a personalized and secure user experience.
In this tutorial, we’ll walk you through the process of designing dynamic menus using Laravel 11 and Bootstrap 5.3.3, focusing on how to adapt the menu based on user roles and permissions. By the end of this post, you’ll be able to implement a menu that shows or hides items dynamically, offering different navigation options to different user roles.
PHP Version & Laravel Version:
You can see below the require Versions For Running Laravel and other things.
"require": {
"php": "^8.2",
"laravel/framework": "^11.0",
"laravel/sanctum": "^4.0",
"laravel/tinker": "^2.9",
"livewire/livewire": "^3.5",
"spatie/laravel-permission": "^6.10",
"yajra/laravel-datatables-buttons": "^11.2",
"yajra/laravel-datatables-oracle": "^11.1"
},
"require-dev": {
"fakerphp/faker": "^1.23",
"laravel/pint": "^1.13",
"laravel/sail": "^1.26",
"laravel/ui": "^4.5",
"mockery/mockery": "^1.6",
"nunomaduro/collision": "^8.0",
"phpunit/phpunit": "^10.5",
"spatie/laravel-ignition": "^2.4"
}
}
What You Will Learn:
- How to define user roles and assign permissions in Laravel 11
- Implementing dynamic menus that adapt based on the user’s roles
- Utilizing Bootstrap 5.3 to style and structure the menu for responsiveness
- How to show/hide menu items depending on user roles permissions
Laravel 11 Installation Guide
This official documentation provides step-by-step instructions for installing Laravel 11, configuring it, and running it on your local development environment. Once users follow this guide, they should be able to set up a basic Laravel installation on their local machine.
Roles Lists
One of the most powerful features you can implement in Laravel 11 is the ability to show or hide menu items based on user permissions. This tutorial will help you learn how to customize menus based on the user’s role and the permissions they have. If you want to control the visibility of menu items and enhance your application’s user experience, this post will walk you through everything you need to know.
Role Create
When creating a role, you can assign specific menus or modules that should be accessible for users with that role. This allows you to tailor the user experience by controlling which parts of the application each role can access. By associating certain menus or modules with specific roles, you can enforce role-based access control (RBAC) in your application, ensuring that only authorized users see the menus or features that are relevant to them. For example, an Admin role might have access to all menus, while a User role may only see limited options such as their profile and settings. This setup enhances both security and usability by presenting users with content and navigation that’s relevant to their permissions
Permission Create
You can create permission and select for which module or menu you want to set permission.
Laravel Yajra DataTable
Yajara datatable is usefull you can see the documents Laravel Yajra DataTable And use it
<?php
namespace App\DataTables;
use App\Models\User;
use App\Models\Role;
use Illuminate\Database\Eloquent\Builder as QueryBuilder;
use Yajra\DataTables\EloquentDataTable;
use Yajra\DataTables\Html\Builder as HtmlBuilder;
use Yajra\DataTables\Html\Button;
use Yajra\DataTables\Html\Column;
use Illuminate\Support\Facades\Auth;
use Yajra\DataTables\Services\DataTable;
use Carbon\Carbon;
class RolesDataTable extends DataTable
{
protected $userPermissions;
public function __construct()
{
$this->userPermissions = Auth::user()->availablePermissions()->pluck('slug');
}
/**
* Build the DataTable class.
*
* @param \Illuminate\Database\Eloquent\Builder $query Results from query() method.
*/
public function dataTable($query): EloquentDataTable
{
return (new EloquentDataTable($query))
->addColumn('action', function ($role) {
$userPermissions=$this->userPermissions;
return view('roles.action', compact('role','userPermissions'));
})
->setRowId('id')
->editColumn('created_at', function ($role) {
return $role->created_at->format('d-m-Y H:i:s');
})
->editColumn('name', function ($role) {
return '' . ucfirst($role->name) . '';
})->editColumn('badge_color', function ($role) {
return '<span class="badge '.$role->badge_color.'">' . ucfirst($role->name) . '</span>';
})
->rawColumns(['action', 'name','badge_color']);
}
public function querySimple(Role $model): QueryBuilder
{
return $model->newQuery();
}
public function query(Role $model): QueryBuilder
{
$query = $model->newQuery();
if (request()->filled('start_date') && request()->filled('end_date')) {
$startDate = request()->input('start_date');
$endDate = request()->input('end_date');
$query->whereBetween('created_at', [
Carbon::parse($startDate)->startOfDay(),
Carbon::parse($endDate)->endOfDay()
]);
}
return $query;
}
public function html(): HtmlBuilder{
return $this->builder()
->setTableId('roles-table')
->columns($this->getColumns())
->minifiedAjax()
->orderBy(1)
->selectStyleSingle()
->buttons([
Button::make('excel'),
Button::make('csv'),
Button::make('pdf'),
Button::make('print'),
Button::make('reset'),
Button::make('reload')
])
->addTableClass('table py-2 table-bordered table-sm table-striped table-responsive w-100')
->parameters([
'scrollX' => false,
'lengthMenu' => [
[10, 25, 50, 100, -1],
['10 rows', '25 rows', '50 rows', '100 rows', 'Show all']
],
'language' => [
'className' => 'form-control form-control-solid w-250px ps-14',
'searchPlaceholder' => 'Search Report',
'zeroRecords' => 'No data available in this table. Please apply filters to get results.',
'emptyTable' => 'No matching records found',
],
'columnDefs' => [
[
'targets' => 0,
'visible' => false,
],
],
])->postAjax(route('roles.index'));
}
/**
* Get the dataTable columns definition.
*/
public function getColumns(): array
{
$canEdit = $this->userPermissions->contains('edit-role');
$canDelete = $this->userPermissions->contains('remove-role');
$canAssign = $this->userPermissions->contains('assign-permissions');
$columns = [
Column::make('id')->width('10%'),
Column::make('name')->width('40%'),
Column::make('badge_color')->title('Looks As')->width('40%'),
];
if ($canEdit || $canDelete || $canAssign) {
$columns[] = Column::computed('action')
->exportable(true)
->printable(true)
->width('30%')
->addClass('text-center');
}
return $columns;
}
public function show(Role $role)
{
return view('roles.show', compact('role'));
}
/**
* Get the filename for export.
*/
protected function filename(): string
{
return 'Roles_' . date('YmdHis');
}
}
Conclusion
By developing a role-driven sidebar template in Laravel 11 with Bootstrap 5.3.3, you can ensure that your web application offers a dynamic, secure, and user-friendly navigation experience. Whether you’re working on an admin panel or a customer-facing application, implementing role-based menus allows you to control access to sensitive areas and enhance the overall user experience.
If you’re looking for a ready-made solution or want to explore more examples of role-based menu systems and Laravel + Bootstrap integration, feel free to check out my GitHub repository. I share full code examples, templates, and other useful resources to help you speed up your development process.
Visit my GitHub: Download the Laravel 11 Menu Roles Permissions Project from GitHub