PHPackages emuniq/filament-scrollable-topnav - 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. emuniq/filament-scrollable-topnav ActiveLibrary[Utility & Helpers](/categories/utility) emuniq/filament-scrollable-topnav ================================= Makes Filament's top navigation scrollable instead of wrapping into multiple rows when you have many navigation groups/clusters. v1.0.0(1mo ago)292[1 PRs](https://github.com/isach5/filament-scrollable-topnav/pulls)MITPHPPHP ^8.1CI failing Since May 6Pushed 1mo agoCompare [ Source](https://github.com/isach5/filament-scrollable-topnav)[ Packagist](https://packagist.org/packages/emuniq/filament-scrollable-topnav)[ RSS](/packages/emuniq-filament-scrollable-topnav/feed)WikiDiscussions main Synced 3w ago READMEChangelog (1)Dependencies (5)Versions (2)Used By (0) Filament Scrollable Top Navigation ================================== [](#filament-scrollable-top-navigation) [![Latest Version on Packagist](https://camo.githubusercontent.com/0e824d087a8fc5577342dc6face0103102a2495638436d0857605643e76725fb/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f762f656d756e69712f66696c616d656e742d7363726f6c6c61626c652d746f706e61762e7376673f7374796c653d666c61742d737175617265)](https://packagist.org/packages/emuniq/filament-scrollable-topnav)[![Total Downloads](https://camo.githubusercontent.com/1f83e8d34c123cea038d23a2c05e228a6dae991ce33face2f890ae80324503b8/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f64742f656d756e69712f66696c616d656e742d7363726f6c6c61626c652d746f706e61762e7376673f7374796c653d666c61742d737175617265)](https://packagist.org/packages/emuniq/filament-scrollable-topnav)[![License](https://camo.githubusercontent.com/10c2a73caf244ef61a6ebd4fa2716b3ce7e94d5d348cb6e5e250917b6229ec3c/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f6c2f656d756e69712f66696c616d656e742d7363726f6c6c61626c652d746f706e61762e7376673f7374796c653d666c61742d737175617265)](LICENSE) A Filament v3 & v4 plugin that turns the top navigation into a single scrollable row instead of letting it wrap into multiple rows when you have many navigation groups or clusters. Adds horizontal mouse-wheel scrolling and an edge-fade affordance so users can tell there's more to see. Demo ---- [](#demo) [![Topnav scrolling with mouse wheel and edge fade](scrollbardemo.gif)](scrollbardemo.gif) The Problem ----------- [](#the-problem) Filament's `topNavigation()` wraps clusters into two (or more) rows when they don't fit, eating vertical space and looking cluttered. Two-word labels can also break across lines. With a lot of clusters there's no visual hint that more navigation exists off-screen, and a regular mouse wheel can't scroll it. The Solution ------------ [](#the-solution) - Forces the topnav into a single row with a hidden scrollbar. - Mouse-wheel scrolling: vertical wheel ticks scroll the topnav horizontally. - Edge fade affordance: a soft gradient appears on the leading/trailing edges only when there's more content in that direction, so users instinctively scroll. - Optional scroll-snap so swipes/wheel land on cluster boundaries. - Auto-scrolls focused items into view for keyboard navigation. Requirements ------------ [](#requirements) - PHP 8.1+ - Laravel 10, 11, or 12 - Filament 3.0+ or 4.0+ Installation ------------ [](#installation) ``` composer require emuniq/filament-scrollable-topnav ``` Register the plugin in your panel provider: ``` use Emuniq\FilamentScrollableTopnav\ScrollableTopnavPlugin; public function panel(Panel $panel): Panel { return $panel ->topNavigation() ->plugins([ ScrollableTopnavPlugin::make(), ]); } ``` That's it. The plugin ships its own CSS and JS as Filament assets and injects a small inline `` + config block via the `HEAD_END` render hook to prevent the brief double-row flash before the asset CSS loads. ### Optional: bundle into a custom theme [](#optional-bundle-into-a-custom-theme) If you have a custom Filament theme and want the styles compiled into your theme bundle (zero FOUC, fully cacheable), import the plugin CSS: ``` php artisan scrollable-topnav:install npm run build ``` Or manually add to `resources/css/filament/{panel}/theme.css`: ``` @import '../../../../vendor/emuniq/filament-scrollable-topnav/resources/css/plugin.css'; ``` Configuration ------------- [](#configuration) Every behavior is opt-in/out via builder methods on `ScrollableTopnavPlugin::make()`: MethodDefaultWhat it does`->fadeSize(string $size)``'36px'`Width of the edge fade gradient. Any CSS length.`->edgeHints(bool)``true`Show the fade gradient when there's overflow in that direction.`->wheelToScroll(bool)``true`Translate vertical mouse-wheel deltas into horizontal scroll on the topnav.`->autoScrollToFocus(bool)``true`Scroll a focused (`:focus`) cluster into view — keyboard accessibility.`->scrollSnap(bool)``false`Snap scroll position to cluster boundaries (`scroll-snap-type: x proximity`).Example with everything tuned: ``` ScrollableTopnavPlugin::make() ->fadeSize('48px') ->scrollSnap() ->wheelToScroll(false), // disable on a panel that already uses wheel for something else ``` How It Works ------------ [](#how-it-works) 1. **Critical inline CSS** via the `HEAD_END` render hook applies `flex-wrap: nowrap` and `white-space: nowrap` immediately on parse, preventing FOUC. 2. **Filament asset CSS** (`plugin.css`) provides the full styling: hidden scrollbar, mask-image edge fades, scroll-snap rules — all gated by `data-*` attributes that the JS toggles. 3. **Filament asset JS** (`plugin.js`) listens for `wheel`, `scroll`, `focusin`, and `resize` events on `.fi-topbar-nav-groups`. It detects mouse wheels (which only emit `deltaY`) and converts them to horizontal scroll while preserving native trackpad horizontal swipes (`deltaX`). It also normalizes `WheelEvent.deltaMode` so high-resolution and line-step wheels both feel right. 4. **Config injection** — the inline `` sets `window.scrollableTopnavConfig` *before* the deferred plugin JS runs, so each panel can have its own settings. Compatibility Notes ------------------- [](#compatibility-notes) - The 1024px breakpoint matches Filament's `lg`, where `topNavigation()` becomes a row instead of a sidebar. Below it the plugin is a no-op. - `mask-image` is supported in all evergreen browsers. IE11 isn't supported (Filament 4 doesn't support it either). - Livewire navigation is handled — the plugin re-binds on `livewire:navigated`. License ------- [](#license) MIT ### Health Score 39 — LowBetter than 85% of packages Maintenance89 Actively maintained with recent releases Popularity11 Limited adoption so far Community7 Small or concentrated contributor base Maturity42 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 Unknown Total 1 Last Release 54d ago ### Community Maintainers ![](https://www.gravatar.com/avatar/227872768d209b013c1c0f320fc5144efc2bf537313ee299cbd4a5f8ee2a097b?d=identicon)[isach5](/maintainers/isach5) --- Top Contributors [![isach5](https://avatars.githubusercontent.com/u/150757961?v=4)](https://github.com/isach5 "isach5 (2 commits)") --- Tags laravelnavigationfilamenttopbarscrollable ### Code Quality TestsPest ### Embed Badge ![Health badge](/badges/emuniq-filament-scrollable-topnav/health.svg) ``` [![Health](https://phpackages.com/badges/emuniq-filament-scrollable-topnav/health.svg)](https://phpackages.com/packages/emuniq-filament-scrollable-topnav) ``` ### Alternatives [psalm/plugin-laravel Psalm plugin for Laravel 3345.1M337](/packages/psalm-plugin-laravel)[bezhansalleh/filament-google-analytics Google Analytics integration for FilamentPHP 209175.5k8](/packages/bezhansalleh-filament-google-analytics)[wsmallnews/filament-nestedset Filament nestedset tree builder powered by kalnoy/nestedset with Filament v4 and v5 support 206.5k14](/packages/wsmallnews-filament-nestedset)[promethys/revive A 'RecycleBin' page where users can restore or delete permanently soft-deleted models. 162.5k](/packages/promethys-revive)[tapp/filament-form-builder User facing form builder using Filament components 141.9k2](/packages/tapp-filament-form-builder)[devletes/filament-pinnable-navigation Pinnable navigation support for Filament 5 panels. 121.1k](/packages/devletes-filament-pinnable-navigation) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)