Download the PHP package emuniq/filament-scrollable-topnav without Composer

On this page you can find all versions of the php package emuniq/filament-scrollable-topnav. It is possible to download/install these versions without Composer. Possible dependencies are resolved automatically.

FAQ

After the download, you have to make one include require_once('vendor/autoload.php');. After that you have to import the classes with use statements.

Example:
If you use only one package a project is not needed. But if you use more then one package, without a project it is not possible to import the classes with use statements.

In general, it is recommended to use always a project to download your libraries. In an application normally there is more than one library needed.
Some PHP packages are not free to download and because of that hosted in private repositories. In this case some credentials are needed to access such packages. Please use the auth.json textarea to insert credentials, if a package is coming from a private repository. You can look here for more information.

  • Some hosting areas are not accessible by a terminal or SSH. Then it is not possible to use Composer.
  • To use Composer is sometimes complicated. Especially for beginners.
  • Composer needs much resources. Sometimes they are not available on a simple webspace.
  • If you are using private repositories you don't need to share your credentials. You can set up everything on our site and then you provide a simple download link to your team member.
  • Simplify your Composer build process. Use our own command line tool to download the vendor folder as binary. This makes your build process faster and you don't need to expose your credentials for private repositories.
Please rate this library. Is it a good library?

Example code of emuniq/filament-scrollable-topnav

Informations about the package filament-scrollable-topnav

Filament Scrollable Top Navigation

Latest Version on Packagist Total Downloads

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

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

Requirements

Installation

Register the plugin in your panel provider:

That's it. The plugin ships its own CSS and JS as Filament assets and injects a small inline <style> + 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

If you have a custom Filament theme and want the styles compiled into your theme bundle (zero FOUC, fully cacheable), import the plugin CSS:

Or manually add to resources/css/filament/{panel}/theme.css:

Configuration

Every behavior is opt-in/out via builder methods on ScrollableTopnavPlugin::make():

Method Default What 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:

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 <script> sets window.scrollableTopnavConfig before the deferred plugin JS runs, so each panel can have its own settings.

Compatibility Notes

License

MIT

All versions of filament-scrollable-topnav with dependencies

PHP Build Version
Package Version
Requires php Version ^8.1
filament/filament Version ^3.0|^4.0
illuminate/support Version ^10.0|^11.0|^12.0
Composer command for our command line client (download client) This client runs in each environment. You don't need a specific PHP version etc. The first 20 API calls are free. Standard composer command

The package emuniq/filament-scrollable-topnav contains the following files

Loading the files please wait ...