Laravel Sticky Panel Component

Free · MIT

A panel that stays put while the page scrolls past it.

A Sticky Panel built for the TALL stack — Blade, Livewire 3 & 4, Alpine.js and Tailwind CSS 4. Server-rendered by default and dark-mode ready. Aura's solid-background and border colours are contrast-tested against WCAG 2.1 AA/UI in CI, in both themes — see what's covered. Drop it in with a single Blade tag: <x-aura::sticky-panel>

Try it live in the docs Install free

Installation

composer require bluestarsystem/aura-ui

Usage

<x-aura::sticky-panel as="aside" offset="1rem">
    <x-aura::heading level="3">On this page</x-aura::heading>
</x-aura::sticky-panel>

See the full API, props and live examples in the Sticky Panel documentation.

Overview

<x-aura::sticky-panel> holds a column in place as the page moves — a table of contents, a summary, a set of filters.

Props

Prop	Type	Default	Description
`offset`	`string`	`'1rem'`	Distance from the edge it sticks to.
`position`	`string`	`'top'`	`top` or `bottom`.
`as`	`string`	`'div'`	`div`, `aside`, `nav`, `section`. Use `aside` or `nav` when the content is a landmark.