PHPackages waffentrager/filament-autohide-navbar - 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. [Utility & Helpers](/categories/utility) 4. / 5. waffentrager/filament-autohide-navbar ActiveLibrary[Utility & Helpers](/categories/utility) waffentrager/filament-autohide-navbar ===================================== A Filament v3 plugin that collapses/expands the navbar on hover 00PHP Since Nov 26Pushed 5mo agoCompare [ Source](https://github.com/Khisrav/filament-navbar-plugin)[ Packagist](https://packagist.org/packages/waffentrager/filament-autohide-navbar)[ RSS](/packages/waffentrager-filament-autohide-navbar/feed)WikiDiscussions main Synced 1mo ago READMEChangelogDependenciesVersions (1)Used By (0) Filament Auto-Collapse Navbar Plugin ==================================== [](#filament-auto-collapse-navbar-plugin) A FilamentPHP v3 plugin that automatically collapses the sidebar navigation to show only icons, and expands on hover to reveal full labels, badges, and grouped sub-items. 📖 **[Quick Start Guide](QUICKSTART.md)** | 🎨 **[Visual Guide](VISUAL_GUIDE.md)** | 💡 **[Examples](EXAMPLES.md)** Features -------- [](#features) - 🎯 **Auto-collapse**: Sidebar shows only icons by default - 🖱️ **Hover to expand**: Full sidebar with labels appears on hover - 🎨 **Smooth transitions**: Elegant animations for better UX - 📱 **Badge support**: Badges appear when sidebar is expanded - 📂 **Group support**: Handles grouped navigation items with sub-links - 🌙 **Dark mode**: Full dark mode support - 💡 **Tooltips**: Shows item names as tooltips when collapsed - ⚡ **Zero configuration**: Works out of the box Requirements ------------ [](#requirements) - PHP 8.1 or higher - FilamentPHP v3.x - Laravel 10.x or higher Installation ------------ [](#installation) Install the package via Composer: ``` composer require khisrav/filament-autohide-navbar ``` That's it! The plugin will automatically register itself and apply the auto-collapse behavior to your Filament sidebar. ### Optional: Publish Configuration [](#optional-publish-configuration) To customize the plugin's behavior, you can publish the configuration file: ``` php artisan vendor:publish --tag="filament-navbar-config" ``` This will create a `config/filament-navbar.php` file where you can adjust: - Enable/disable the plugin - Collapsed width - Transition duration - Tooltip visibility How It Works ------------ [](#how-it-works) The plugin automatically: 1. **Collapsed State (Default)**: Shows only navigation icons (width: 4rem) 2. **Expanded State (On Hover)**: Shows full navigation with labels, badges, and sub-items (width: 16rem) 3. **Smooth Transitions**: All changes are animated with CSS transitions 4. **Tooltips**: When collapsed, hovering over an item shows its label as a tooltip Behavior -------- [](#behavior) ### When Collapsed (Not Hovering) [](#when-collapsed-not-hovering) - Only icons are visible - Sidebar width: 4rem - Icons are centered - Badges are hidden - Group sub-links are hidden - Tooltips appear on hover ### When Expanded (Hovering) [](#when-expanded-hovering) - Full labels are visible - Sidebar width: 16rem (default) - Badges are visible - Grouped items show their sub-links - Normal Filament navigation behavior Customization ------------- [](#customization) ### Adjusting Collapsed Width [](#adjusting-collapsed-width) If you want to customize the collapsed width, add this to your `resources/css/app.css` or custom CSS file: ``` aside.fi-sidebar:not(:hover) { width: 5rem !important; /* Change from default 4rem */ } ``` ### Adjusting Expanded Width [](#adjusting-expanded-width) The expanded width uses Filament's CSS variable. You can customize it in your panel provider: ``` use Filament\Panel; public function panel(Panel $panel): Panel { return $panel // ... other configuration ->sidebarWidth('18rem'); // Default is 16rem } ``` ### Adjusting Transition Speed [](#adjusting-transition-speed) Add this to your custom CSS: ``` aside.fi-sidebar { transition: width 0.5s ease-in-out !important; /* Change from default 0.3s */ } ``` ### Disable Tooltips [](#disable-tooltips) If you don't want tooltips when collapsed, add this to your custom CSS: ``` aside.fi-sidebar:not(:hover) .fi-sidebar-item:hover::after, aside.fi-sidebar:not(:hover) .fi-sidebar-group-button:hover::after { display: none !important; } ``` Compatibility ------------- [](#compatibility) This plugin is compatible with: - ✅ Standard navigation items - ✅ Navigation items with icons - ✅ Navigation items with badges - ✅ Grouped navigation items (with sub-links) - ✅ User menu - ✅ Tenant switcher - ✅ Dark mode - ✅ Custom themes Support ------- [](#support) If you encounter any issues or have questions, please [open an issue](https://github.com/Khisrav/filament-autohide-navbar/issues) on GitHub. License ------- [](#license) This package is open-source software licensed under the [MIT license](LICENSE). Credits ------- [](#credits) - [Khisrav](https://github.com/Khisrav) - [All Contributors](../../contributors) Changelog --------- [](#changelog) Please see [CHANGELOG](CHANGELOG.md) for more information on what has changed recently. ### Health Score 17 — LowBetter than 6% of packages Maintenance48 Moderate activity, may be stable Popularity0 Limited adoption so far Community6 Small or concentrated contributor base Maturity13 Early-stage or recently created project 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. ### Community Maintainers ![](https://www.gravatar.com/avatar/f6277466d2c2c6c7e8122808e7375522b86d78d72bee27a0646f24303edc28a5?d=identicon)[Khisrav](/maintainers/Khisrav) --- Top Contributors [![Khisrav](https://avatars.githubusercontent.com/u/49684618?v=4)](https://github.com/Khisrav "Khisrav (4 commits)") ### Embed Badge ![Health badge](/badges/waffentrager-filament-autohide-navbar/health.svg) ``` [![Health](https://phpackages.com/badges/waffentrager-filament-autohide-navbar/health.svg)](https://phpackages.com/packages/waffentrager-filament-autohide-navbar) ``` ### Alternatives [leaphly/price 466.5k](/packages/leaphly-price) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)