Home >Backend Development >PHP Tutorial >Building Dynamic and Maintainable Menus in Laravel
Managing navigation menus can become challenging in Laravel applications as they grow, especially with dynamic elements like role-based access controls. This blog post explores how to simplify and structure your menus using a Menu Builder system, making them easier to maintain, extend, and scale.
In many Laravel projects, Blade templates handle menu visibility using conditionals:
@can('viewAdmin') <a href="{{ route('administration.index') }}"> {{ __('Administration') }} </a> @endcan
While this approach works for simple applications, it becomes cluttered and unmanageable as the number of menus increases.
A Menu Builder system encapsulates menu logic into reusable classes, improving:
Support my mission to empower the developer community by sponsoring my work—your contributions help me build and share valuable tools, insights, and resources: Learn more here.
To control access to the administration menu, define a viewAdmin gate in your AuthServiceProvider:
use Illuminate\Support\Facades\Gate; use App\Models\User; class AuthServiceProvider extends ServiceProvider { public function boot() { $this->registerPolicies(); Gate::define('viewAdmin', function (User $user) { return $user->hasRole('admin'); // Replace with your app's role-checking logic }); } }
The MenuItem class defines all attributes of a menu item, such as label, URL, icon, and visibility:
<?php namespace App\Actions\Builder; use CleaniqueCoders\Traitify\Contracts\Builder; use InvalidArgumentException; class MenuItem implements Builder { private string $label; private string $url; private string $target = '_self'; private array $attributes = []; private array $children = []; private string $icon = 'o-squares-2x2'; private ?string $description = null; private ?string $tooltip = null; private $visible = true; private array $output = []; public function setLabel(string $label): self { $this->label = $label; return $this; } public function setUrl(string $url): self { $this->url = $url; return $this; } public function setTarget(string $target): self { $this->target = $target; return $this; } public function addAttribute(string $key, string $value): self { $this->attributes[$key] = $value; return $this; } public function addChild(MenuItem $child): self { $this->children[] = $child; return $this; } public function setIcon(string $icon): self { $this->icon = $icon; return $this; } public function setDescription(string $description): self { $this->description = $description; return $this; } public function setTooltip(string $tooltip): self { $this->tooltip = $tooltip; return $this; } public function setVisible($visible): self { if (! is_bool($visible) && ! is_callable($visible)) { throw new InvalidArgumentException('The visible property must be a boolean or a callable.'); } $this->visible = $visible; return $this; } public function isVisible(): bool { return is_callable($this->visible) ? call_user_func($this->visible) : $this->visible; } public function build(): self { $this->output = [ 'label' => $this->label, 'url' => $this->url, 'target' => $this->target, 'attributes' => $this->attributes, 'icon' => $this->icon, 'description' => $this->description, 'tooltip' => $this->tooltip, 'children' => array_filter( array_map(fn (MenuItem $child) => $child->build()->toArray(), $this->children), fn (array $child) => ! empty($child) ), ]; return $this; } public function toArray(): array { return $this->output; } public function toJson(int $options = 0): string { return json_encode($this->toArray(), $options, 512); } }
The Menu builder resolves and constructs menus dynamically:
namespace App\Actions\Builder; class Menu { public static function make() { return new self; } public function build(string $builder) { $class = match ($builder) { 'navbar' => Navbar::class, 'sidebar' => Sidebar::class, 'administration' => Administration::class, default => Navbar::class, }; $builder = new $class; return $builder->build(); } }
Access the menus using a helper function:
<?php use App\Actions\Builder\Menu; if (! function_exists('menu')) { function menu(string $builder) { return Menu::make()->build($builder)->menus(); } }
Define administration-specific menu items in the Administration class:
<?php namespace App\Actions\Builder\Menu; use App\Actions\Builder\MenuItem; use CleaniqueCoders\Traitify\Contracts\Builder; use CleaniqueCoders\Traitify\Contracts\Menu; use Illuminate\Support\Collection; use Illuminate\Support\Facades\Gate; class Administration implements Builder, Menu { private Collection $menus; public function menus(): Collection { return $this->menus; } public function build(): self { $this->menus = collect([ (new MenuItem) ->setLabel(__('Issues')) ->setUrl(url(config('telescope.path'))) ->setTarget('_blank') ->setVisible(fn () => Gate::allows('viewTelescope')) ->setTooltip(__('View Telescope issues')) ->setDescription(__('Access application issues using Laravel Telescope')) ->setIcon('o-bug'), // Heroicon outline for a bug (new MenuItem) ->setLabel(__('Queues')) ->setUrl(url(config('horizon.path'))) ->setTarget('_blank') ->setVisible(fn () => Gate::allows('viewHorizon')) ->setTooltip(__('Manage queues')) ->setDescription(__('Access Laravel Horizon to monitor and manage queues')) ->setIcon('o-cog'), // Heroicon outline for settings/tasks (new MenuItem) ->setLabel(__('Access Control')) ->setUrl(route('security.access-control.index')) ->setVisible(fn () => Gate::allows('viewAccessControl')) ->setTooltip(__('Manage access control')) ->setDescription(__('Define and manage access control rules')) ->setIcon('o-lock-closed'), (new MenuItem) ->setLabel(__('Users')) ->setUrl(route('security.users.index')) ->setVisible(fn () => Gate::allows('viewUser')) ->setTooltip(__('Manage users')) ->setDescription(__('View and manage user accounts')) ->setIcon('o-user-group'), (new MenuItem) ->setLabel(__('Audit Trail')) ->setUrl(route('security.audit-trail.index')) ->setVisible(fn () => Gate::allows('viewAudit')) ->setTooltip(__('View audit trails')) ->setDescription(__('Audit logs for security and activity tracking')) ->setIcon('o-document-text'), ])->reject(fn (MenuItem $menu) => ! $menu->isVisible()) ->map(fn (MenuItem $menu) => $menu->build()->toArray()); return $this; } }
Add the following route configuration for the administration page:
<?php use Illuminate\Support\Facades\Route; Route::middleware(['auth:sanctum', 'verified', 'can:viewAdmin']) ->as('administration.') ->prefix('administration') ->group(function () { Route::view('/', 'administration.index')->name('index'); });
Navigation Menu (navigation-menu.blade.php):
@can('viewAdmin') <a href="{{ route('administration.index') }}"> <x-icon name="o-computer-desktop" /> {{ __('Administration') }} </a> @endcan
Administration Menu (administration/index.blade.php):
<x-app-layout> <x-slot name="header">{{ __('Administration') }}</x-slot> <div> <hr> <p><strong>Output</strong></p> <p>Here the final output that you can have:</p> <p><img src="https://img.php.cn/upload/article/000/000/000/173418649412401.jpg" alt="Building Dynamic and Maintainable Menus in Laravel"></p><blockquote> <p>Support my mission to empower the developer community by sponsoring my work—your contributions help me build and share valuable tools, insights, and resources: Learn more here.</p> </blockquote> <hr> <h3> <strong>Conclusion</strong> </h3> <p>This <strong>Menu Builder system</strong> simplifies navigation management in Laravel by:</p> <ol> <li>Centralising menu definitions for better maintainability.</li> <li>Dynamically controlling menu visibility using roles or permissions.</li> <li>Reusing menu logic across views and layouts.</li> </ol> <p>By adopting this approach, you can scale your navigation system seamlessly, even in complex applications. </p> <p>You may want to load your menu details from database and construct the menus that you want. But for me, this is good enough. I don't have projects require me to use database driven menu configuration.</p> <p>The codes can be found here. </p> <p>Try it out and share your thoughts! ?</p> <hr> <p>Photo by LinedPhoto on Unsplash</p>
The above is the detailed content of Building Dynamic and Maintainable Menus in Laravel. For more information, please follow other related articles on the PHP Chinese website!