PHPackages jacquestrdx123/vue-sidebar-menu - PHPackages - PHPackages [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register) 1. [Directory](/) 2. / 3. jacquestrdx123/vue-sidebar-menu ActiveLibrary jacquestrdx123/vue-sidebar-menu =============================== A Laravel package providing a database-driven sidebar menu system with Vue 3 components 1.0.9(3mo ago)058MITPHPPHP ^8.1 Since Jan 7Pushed 3mo agoCompare [ Source](https://github.com/jacquestrdx123/vue-sidebar-menu)[ Packagist](https://packagist.org/packages/jacquestrdx123/vue-sidebar-menu)[ RSS](/packages/jacquestrdx123-vue-sidebar-menu/feed)WikiDiscussions main Synced 1mo ago READMEChangelogDependencies (4)Versions (11)Used By (0) Vue Sidebar Menu ================ [](#vue-sidebar-menu) A Laravel Composer package providing a database-driven sidebar menu system with Vue 3 components and Inertia.js integration. Features -------- [](#features) - Database-driven menu structure (MenuGroups and MenuItems) - Permission-based menu item visibility - Nested menu items support - User favorite menu items - Search functionality - Collapsible sidebar - Responsive design - Inertia.js integration Requirements ------------ [](#requirements) - Laravel 9+ or 10+ - Vue 3 - Inertia.js - PHP 8.1+ Installation ------------ [](#installation) 1. Install the package via Composer: ``` composer require jacquestredoux/vue-sidebar-menu ``` 2. Install Heroicons (required dependency): ``` npm install @heroicons/vue ``` 3. Run the install command: ``` php artisan vue-sidebar-menu:install ``` This will: - Publish migrations to `database/migrations/` - Publish Vue components to `resources/js/Components/SidebarMenu/` - Publish icon mapper utility to `resources/js/utils/iconMapper.js` - Publish config file to `config/vue-sidebar-menu.php` 4. Run migrations: ``` php artisan migrate ``` 5. (Optional) Remove Material Icons from your CSS if no longer needed: Remove the Material Icons import from your `resources/css/app.css`: ``` /* Remove this line if you're no longer using Material Icons */ @import url("https://fonts.googleapis.com/css2?family=Material+Icons"); ``` Configuration ------------- [](#configuration) The config file is published to `config/vue-sidebar-menu.php`. You can customize: - `cache_time`: Cache duration for user permissions (defaults to 5 minutes in debug, 1 hour in production) - `member_model`: Member model class name (if you have a separate Member model) - `user_model`: User model class name (defaults to Laravel auth provider) Usage ----- [](#usage) ### 1. Share Menu Data via Inertia Middleware [](#1-share-menu-data-via-inertia-middleware) Update your `app/Http/Middleware/HandleInertiaRequests.php`: ``` use JacquesTredoux\VueSidebarMenu\Services\MenuWebService; use Inertia\Inertia; class HandleInertiaRequests extends Middleware { public $menuService; public function __construct(RootTemplateProvider $rootTemplateProvider) { $this->rootTemplateProvider = $rootTemplateProvider; $this->menuService = app(MenuWebService::class); } public function share(Request $request): array { $user = $request->user(); return [ ...parent::share($request), 'ziggy' => fn () => [ ...(new Ziggy)->toArray(), 'location' => $request->url(), ], 'menu' => $this->menuService->getMenu($request->route()?->getName(), $user), 'favoriteMenuItems' => $this->menuService->getFavoriteMenuItems($user), ]; } } ``` ### 2. Include SidebarMenu Component in Your Layout [](#2-include-sidebarmenu-component-in-your-layout) In your authenticated layout file (e.g., `resources/js/Layouts/Authenticated.vue`): ``` import { useSidebar } from "@/Components/SidebarMenu/composables/useSidebar.js"; import SidebarMenu from "@/Components/SidebarMenu/SidebarMenu.vue"; const { isCollapsed: isSidebarCollapsed } = useSidebar(); ``` ### 3. Set Up Menu Groups and Items [](#3-set-up-menu-groups-and-items) You can create menu groups and items via database seeders or directly in the database: ``` use JacquesTredoux\VueSidebarMenu\Models\MenuGroup; use JacquesTredoux\VueSidebarMenu\Models\MenuItem; // Create a menu group $group = MenuGroup::create([ 'key' => 'dashboard', 'label' => 'Dashboard', 'icon' => 'heroicon-o-home', 'sort_order' => 1, 'is_active' => true, ]); // Create a menu item MenuItem::create([ 'menu_group_id' => $group->id, 'key' => 'main-dashboard', 'label' => 'Main Dashboard', 'icon' => 'heroicon-o-chart-bar', 'route' => 'vue.dashboard', 'permission_name' => 'view_any_dashboard', // Optional: require permission 'sort_order' => 1, 'is_active' => true, ]); ``` ### 4. (Optional) Add Favorite Menu Items Support [](#4-optional-add-favorite-menu-items-support) Add the relationship to your User model: ``` use JacquesTredoux\VueSidebarMenu\Models\UserFavoriteMenuItem; public function favoriteMenuItems() { return $this->hasMany(UserFavoriteMenuItem::class); } public function getFavoriteMenuKeys() { return $this->favoriteMenuItems()->pluck('menu_key')->toArray(); } ``` Menu Item Structure ------------------- [](#menu-item-structure) ### MenuGroup Fields [](#menugroup-fields) - `key`: Unique identifier (e.g., 'dashboard', 'finance') - `label`: Display name - `icon`: Icon name (supports both Material Design and Heroicons - see Icon Support below) - `sort_order`: Display order - `is_active`: Whether the group is active ### MenuItem Fields [](#menuitem-fields) - `menu_group_id`: Foreign key to menu\_groups - `parent_id`: Foreign key to menu\_items (for nested items, nullable) - `key`: Unique identifier within the group - `label`: Display name - `icon`: Icon name (supports both Material Design and Heroicons - see Icon Support below) - `url`: Direct URL (fallback, nullable) - `route`: Laravel route name (nullable) - `permission_name`: Required permission name (nullable) - `sort_order`: Display order - `is_active`: Whether the item is active Icon Support ------------ [](#icon-support) The package uses Heroicons by default, but includes backward compatibility with Material Design icons through the `iconMapper` utility. ### Supported Icon Formats [](#supported-icon-formats) 1. **Heroicons** (recommended): - Simple name: `home`, `user`, `settings` - Full name: `heroicon-o-home`, `heroicon-o-user` 2. **Material Design Icons** (backward compatible): - Material icon name: `home`, `dashboard`, `settings` - MDI format: `mdi-home`, `mdi-dashboard` The icon mapper automatically converts Material Design icon names to their Heroicon equivalents. Common mappings include: - `home` / `mdi-home` → `HomeIcon` - `dashboard` / `mdi-view-dashboard` → `ChartBarIcon` - `settings` / `mdi-cog` → `Cog6ToothIcon` - `user` / `mdi-account` → `UserIcon` - And many more... See `resources/js/utils/iconMapper.js` for the complete mapping list. Permission System ----------------- [](#permission-system) The package supports permission-based menu item visibility. It works with: - Spatie Laravel Permission (via `getAllPermissions()` method) - Custom permission systems (via `permissions()` relationship) Permission names are automatically generated from route names: - Route: `vue.roles.index` → Permissions: `view_any_role`, `view_any_role::*` Customization ------------- [](#customization) ### Logo [](#logo) Pass the logo URL and alt text as props: ``` ``` ### Styling [](#styling) The component uses Tailwind CSS classes. You can customize colors by modifying the classes in the published Vue components. ### Icon Customization [](#icon-customization) The icon mapper utility (`resources/js/utils/iconMapper.js`) supports both Material Design and Heroicon formats. You can: 1. Use Heroicons directly (recommended): ``` MenuItem::create([ 'icon' => 'home', // or 'heroicon-o-home' // ... ]); ``` 2. Continue using Material Design icons (backward compatible): ``` MenuItem::create([ 'icon' => 'mdi-home', // Automatically converted to HomeIcon // ... ]); ``` 3. Extend the icon mapper with custom mappings in your application's `resources/js/utils/iconMapper.js` file. License ------- [](#license) MIT Key Features ------------ [](#key-features) 1. **Database-Driven Menu**: Menu structure is stored in database tables instead of hardcoded arrays 2. **Permission-Based Filtering**: Menu items are filtered based on user permissions 3. **Favorite Menu Items**: Users can favorite menu items for quick access 4. **Search Functionality**: Built-in search to filter menu items 5. **Collapsible Sidebar**: Sidebar can be collapsed/expanded with state persistence in localStorage 6. **Active Route Highlighting**: Current route is automatically highlighted in the menu 7. **Nested Menu Support**: Supports multi-level nested menu items 8. **Heroicons Integration**: All icons use Heroicons (with Material Design backward compatibility) 9. **Responsive Design**: Automatically collapses on mobile devices Migration from Material Icons ----------------------------- [](#migration-from-material-icons) If you're migrating from a Material Icons-based menu system: 1. The icon mapper automatically handles conversion of Material Design icon names to Heroicons 2. Your existing menu items in the database will continue to work 3. No need to update icon names in the database - the package handles the conversion automatically 4. You can optionally remove Material Icons from your CSS after migration Troubleshooting --------------- [](#troubleshooting) ### Icons Not Displaying [](#icons-not-displaying) - Ensure `@heroicons/vue` is installed: `npm install @heroicons/vue` - Check that the icon mapper utility is published: `resources/js/utils/iconMapper.js` - Verify icon names in your database match supported formats ### Sidebar Not Showing [](#sidebar-not-showing) - Ensure the `SidebarMenu` component is imported and included in your layout - Check that menu data is shared via Inertia middleware - Verify the component path is correct: `@/Components/SidebarMenu/SidebarMenu.vue` ### Menu Items Not Filtering by Permissions [](#menu-items-not-filtering-by-permissions) - Verify user permissions are being loaded correctly - Check that `permission_name` is set correctly in menu items - Ensure your User model implements `Authorizable` interface (Laravel default) Support ------- [](#support) For issues and questions, please open an issue on GitHub. ### Health Score 38 — LowBetter than 85% of packages Maintenance78 Regular maintenance activity Popularity10 Limited adoption so far Community6 Small or concentrated contributor base Maturity49 Maturing project, gaining track record Bus Factor1 Top contributor holds 100% of commits — single point of failure How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window. **Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores. **Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement. **Maturity (30%)** — Project age, version count, PHP version support, and release stability. ### Release Activity Cadence Every ~1 days Total 10 Last Release 114d ago ### Community Maintainers ![](https://www.gravatar.com/avatar/79e50e892789e6edfa4fc8e6e6110a25138bbae47556cd1d94d9fe5ca7962554?d=identicon)[jacquestrdx123](/maintainers/jacquestrdx123) --- Top Contributors [![jacquestrdx123](https://avatars.githubusercontent.com/u/40657951?v=4)](https://github.com/jacquestrdx123 "jacquestrdx123 (15 commits)") ### Embed Badge ![Health badge](/badges/jacquestrdx123-vue-sidebar-menu/health.svg) ``` [![Health](https://phpackages.com/badges/jacquestrdx123-vue-sidebar-menu/health.svg)](https://phpackages.com/packages/jacquestrdx123-vue-sidebar-menu) ``` ### Alternatives [barryvdh/laravel-ide-helper Laravel IDE Helper, generates correct PHPDocs for all Facade classes, to improve auto-completion. 14.9k123.0M687](/packages/barryvdh-laravel-ide-helper)[tucker-eric/eloquentfilter An Eloquent way to filter Eloquent Models 1.8k4.8M26](/packages/tucker-eric-eloquentfilter)[spatie/laravel-health Monitor the health of a Laravel application 85810.0M83](/packages/spatie-laravel-health)[fumeapp/modeltyper Generate TypeScript interfaces from Laravel Models 196277.9k](/packages/fumeapp-modeltyper)[orchestra/canvas Code Generators for Laravel Applications and Packages 21017.2M158](/packages/orchestra-canvas)[clickbar/laravel-magellan This package provides functionality for working with the postgis extension in Laravel. 423715.4k1](/packages/clickbar-laravel-magellan) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)