Installation
Compatibility
| Filament version | Package version |
|---|---|
| 2.x | 1.x |
| 3.x | 2.x |
| 4.x | 3.x |
| 4.x & 5.x | 4.x |
Sticky Header requires PHP 8.2 or later and filament/filament.
Install the package
Install with Composer:
composer require awcodes/filament-sticky-header
The service provider is registered automatically, and there is no configuration file to publish.
Register the plugin
Add the plugin to the panel:
use Awcodes\StickyHeader\StickyHeaderPlugin;
public function panel(Panel $panel): Panel
{
return $panel
->plugins([
StickyHeaderPlugin::make(),
]);
}
That is everything. With no further configuration, every page in the panel gets a sticky header in the default theme.
Import the stylesheet
Add the package's stylesheet to your theme's CSS file:
@import '../../../../vendor/awcodes/filament-sticky-header/resources/css/plugin.css';
If you are using the standalone Filament packages rather than Panels, add the same line to your application's CSS file.
Important
Panel users need a custom theme before this line has anywhere to live. If you have not created one yet, follow Creating a custom theme in the Filament documentation first.
The relative path above assumes the conventional theme location, resources/css/filament/<panel>/theme.css. Adjust the number of ../ segments if your theme lives elsewhere — the path has to resolve to vendor/awcodes/filament-sticky-header/resources/css/plugin.css from the file it is written in.
Note
This is an @import of a stylesheet, not the @source directive other Filament plugins use. Sticky Header ships real CSS rather than classes to be scanned out of Blade views, so @source would find nothing.
Without this import the JavaScript still runs and the header still becomes sticky, but with no styling to distinguish it — no background, no border, no shadow — so it will overlap the content beneath it.
Next steps
See Configuration for themes and for turning the header off on particular pages.