PHPackages                             hayderhatem/filament-sub-navigation - 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. hayderhatem/filament-sub-navigation

ActiveLibrary[Utility & Helpers](/categories/utility)

hayderhatem/filament-sub-navigation
===================================

Add hover-based sub-navigation to Filament navigation items using badges

v1.0.0(1y ago)8994↓68.3%3[1 issues](https://github.com/HayderHatem/filament-sub-navigation/issues)MITPHPPHP ^8.1

Since Jun 30Pushed 1y agoCompare

[ Source](https://github.com/HayderHatem/filament-sub-navigation)[ Packagist](https://packagist.org/packages/hayderhatem/filament-sub-navigation)[ Docs](https://github.com/hayderhatem/filament-sub-navigation)[ RSS](/packages/hayderhatem-filament-sub-navigation/feed)WikiDiscussions main Synced 2d ago

READMEChangelog (1)Dependencies (8)Versions (2)Used By (0)

Filament Sub Navigation
=======================

[](#filament-sub-navigation)

[![Latest Version on Packagist](https://camo.githubusercontent.com/d0124d7cb7031fbb06c545d97605d21eea2b8816966f1e622b8b72bdb3f2b528/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f762f686179646572686174656d2f66696c616d656e742d7375622d6e617669676174696f6e2e7376673f7374796c653d666c61742d737175617265)](https://packagist.org/packages/hayderhatem/filament-sub-navigation)[![Total Downloads](https://camo.githubusercontent.com/0eee0642f96e0ae34a7e2faa6e9cf926b2ed0ec5aa2738278bfc866454cbfaee/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f64742f686179646572686174656d2f66696c616d656e742d7375622d6e617669676174696f6e2e7376673f7374796c653d666c61742d737175617265)](https://packagist.org/packages/hayderhatem/filament-sub-navigation)

Add beautiful dropdown sub-navigation menus to your Filament sidebar navigation items with just one trait!

✨ Features
----------

[](#-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
---------

[](#-preview)

When you hover over a navigation item with sub-navigation, a beautiful dropdown appears:

```
┌─ 👥 Users ▼ ─────────────────┐
│                              │
│  📋 All Users                │
│  ➕ Create User              │
│  🗃️ User Categories          │
│  📊 User Reports             │
│  ⚙️ User Settings            │
│                              │
└──────────────────────────────┘

```

🚀 Installation
--------------

[](#-installation)

Install the package via Composer:

```
composer require hayderhatem/filament-sub-navigation
```

The package will auto-register its service provider.

📋 Quick Start
-------------

[](#-quick-start)

### Step 1: Add the Trait

[](#step-1-add-the-trait)

Add the `HasBadgeSubNavigation` trait to any Filament Resource:

```