3.6 KiB
Frontend Menu Management
This template includes a dynamic menu management system that allows administrators to create and manage frontend navigation menus through the admin panel.
Features
- Dynamic Menus: Create multiple menus (header, footer, sidebar, etc.)
- Nested Items: Support for parent-child menu items (dropdowns)
- Multiple Link Types:
- External links (URLs)
- Named routes
- Module links (auto-generates route from module slug)
- Permission-Based Filtering: Menu items are automatically filtered based on user permissions
- Drag & Drop Reordering: Reorder menu items in the admin panel
How It Works
Permission Filtering
Menu items are automatically filtered based on the current user's permissions:
-
Module Items: If a menu item links to a module (e.g.,
companies), the user must have{module}.viewpermission (e.g.,companies.view) to see that item. -
Permission Items: If a menu item has a specific
permissionset, the user must have that exact permission. -
Admin Users: Users with the
adminrole can see all menu items. -
Guest Users: Only see items with no permission or module restrictions.
Usage
In Blade Templates
Use the <x-frontend-menu> component to render a menu:
{{-- Desktop navigation --}}
<x-frontend-menu menu="header" />
{{-- Mobile/responsive navigation --}}
<x-frontend-menu-responsive menu="header" />
{{-- By location --}}
<x-frontend-menu menu="footer" />
Programmatic Access
use App\Services\MenuService;
$menuService = app(MenuService::class);
// Get menu items (already filtered for current user)
$items = $menuService->getMenu('header');
// Get available modules for menu items
$modules = $menuService->getAvailableModules();
// Get available routes for menu items
$routes = $menuService->getAvailableRoutes();
Admin Panel
Navigate to Settings > Menus in the admin panel to:
- Create new menus
- Add/edit/delete menu items
- Set item types (link, route, module)
- Configure permissions for each item
- Reorder items via drag & drop
Database Structure
menus table
id- Primary keyname- Display nameslug- Unique identifier (used in templates)location- Optional location hint (header, footer, sidebar)is_active- Toggle menu visibility
menu_items table
id- Primary keymenu_id- Foreign key to menusparent_id- For nested itemstitle- Display texttype- link, route, or moduleurl- For external linksroute- For named routesroute_params- JSON parameters for routesmodule- Module slug for permission checkingpermission- Specific permission requiredicon- Heroicon nametarget- _self or _blankorder- Sort orderis_active- Toggle visibility
Adding Menu Items for New Modules
When creating a new module, add a menu item to link to it:
- Go to Settings > Menus in admin
- Edit the "Header Navigation" menu
- Click "New" in the Items section
- Set:
- Title: Your module name
- Type: Module
- Module: Select your module from dropdown
- Save
The menu item will automatically:
- Generate the correct URL (
/{module-slug}) - Check for
{module}.viewpermission - Hide from users without permission
Customization
Custom Menu Component
Copy and modify the default component:
cp resources/views/components/frontend-menu.blade.php \
resources/views/components/my-custom-menu.blade.php
Styling
The default components use Tailwind CSS classes. Modify the component templates to match your design.