Download the PHP package hayderhatem/filament-sub-navigation without Composer
On this page you can find all versions of the php package hayderhatem/filament-sub-navigation. It is possible to download/install these versions without Composer. Possible dependencies are resolved automatically.
Download hayderhatem/filament-sub-navigation
More information about hayderhatem/filament-sub-navigation
Files in hayderhatem/filament-sub-navigation
Package filament-sub-navigation
Short Description Add hover-based sub-navigation to Filament navigation items using badges
License MIT
Homepage https://github.com/hayderhatem/filament-sub-navigation
Informations about the package filament-sub-navigation
Filament Sub Navigation
Add beautiful dropdown sub-navigation menus to your Filament sidebar navigation items with just one trait!
✨ Features
- 🎯 Simple Setup - Just add one trait to your Resource
- 🎨 Beautiful UI - Seamlessly integrates with Filament's design
- 🌙 Dark Mode Support - Automatically adapts to light/dark themes
- 📱 Mobile Responsive - Works perfectly on all screen sizes
- ⚡ Alpine.js Compatible - Optional Alpine.js component included
- 🔄 Livewire Ready - Handles dynamic content updates
- 🐛 Debug Friendly - Comprehensive console logging
📸 Preview
When you hover over a navigation item with sub-navigation, a beautiful dropdown appears:
🚀 Installation
Install the package via Composer:
The package will auto-register its service provider.
📋 Quick Start
Step 1: Add the Trait
Add the HasBadgeSubNavigation
trait to any Filament Resource:
Step 2: Configure Navigation
In your Resource, override the getNavigationItems()
method:
Step 3: Define Sub-Navigation Items
Add the getSubNavigationItems()
method to your Resource:
Step 4: Register Sub-Navigation Data
In your AdminPanelProvider.php
, add sub-navigation data registration:
That's it! 🎉 Your sub-navigation dropdowns will now appear when hovering over navigation items.
🔧 Advanced Usage
Multiple Resources with Sub-Navigation
You can add sub-navigation to multiple resources:
Using Alpine.js Component (Optional)
For advanced customization, you can use the included Alpine.js component:
Custom Styling
The package automatically adapts to Filament's theme, but you can add custom CSS:
🐛 Troubleshooting
Navigation Items Not Showing Dropdowns
- Check Console Logs: Open browser developer tools and look for sub-navigation debug messages
- Verify Key Matching: Ensure the key in
getSubNavigationItems()
matches your navigation label (lowercase, alphanumeric only) - Clear Caches: Run
php artisan cache:clear && php artisan view:clear
Example Debug Output
Dropdown Not Positioned Correctly
The package automatically handles positioning, but if you have custom CSS that affects the sidebar, you might need to adjust:
Dark Mode Issues
The package auto-detects dark mode, but if you have custom theme switching, you can manually trigger reinitialization:
🎨 Customization Options
Sub-Navigation Item Structure
Each sub-navigation item supports these properties:
Navigation Key Generation
The package generates keys from navigation labels using this logic:
- Converts to lowercase
- Removes all non-alphanumeric characters
- Example: "User Management" becomes "usermanagement"
📚 API Reference
HasBadgeSubNavigation Trait
Methods
createBadgeNavigation()
Creates a navigation item with sub-navigation support.
Parameters:
string $label
- Navigation item labelstring $icon
- Heroicon namestring $url
- Target URLcallable $isActiveWhen
- Active state callbackstring|null $badge
- Badge textarray $subItems
- Sub-navigation items
getSubNavigationItems()
Returns array of sub-navigation items grouped by navigation key.
Returns: array<string, array>
🔄 Changelog
v1.0.0
- Initial release
- Basic dropdown sub-navigation functionality
- Dark mode support
- Alpine.js component
- Comprehensive documentation
🤝 Contributing
Contributions are welcome! Please feel free to submit a Pull Request.
📄 License
The MIT License (MIT). Please see License File for more information.
🙏 Credits
- Hayder Hatem - Creator and maintainer
- Filament Team - For the amazing admin panel framework
- Laravel Community - For continuous inspiration
Made with ❤️ for the Filament community
All versions of filament-sub-navigation with dependencies
filament/filament Version ^3.0
spatie/laravel-package-tools Version ^1.15.0
illuminate/contracts Version ^10.0|^11.0