Skip to content

No results for

↑ ↓ navigate ↵ open Esc close 
php artisan aura:add sticky-panel

Copies the component source into resources/views/components/aura/. Run php artisan aura:init first if you haven't already. See the CLI guide for all options.

composer require bluestarsystem/aura-ui
php artisan aura:install

Full installation instructions in the Installation guide.

Overview

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

Basic Usage

Paragraph 1 of the article body.

Paragraph 2 of the article body.

Paragraph 3 of the article body.

Paragraph 4 of the article body.

Paragraph 5 of the article body.

Paragraph 6 of the article body.

<div class="flex gap-4">
    <div class="flex-1 space-y-2 text-sm text-aura-surface-600">
        @foreach (range(1, 6) as $i)
            <p>Paragraph {{ $i }} of the article body.</p>
        @endforeach
    </div>
    <x-aura::sticky-panel as="aside" offset="0" class="w-40 self-start rounded-aura-md bg-aura-surface-50 p-3 text-sm">
        <p class="font-semibold">On this page</p>
        <p class="mt-1 text-aura-surface-600">Stays put while the text scrolls.</p>
    </x-aura::sticky-panel>
</div>
<x-aura::sticky-panel as="aside" offset="1rem">
    <x-aura::heading level="3">On this page</x-aura::heading>
</x-aura::sticky-panel>

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.

Why it might do nothing

position: sticky has no effect if an ancestor clips or scrolls the element — an overflow: hidden anywhere above is enough, and it fails quietly. If the panel will not stick, look up the tree for overflow before looking at the panel.

The parent also has to be taller than the panel: there is nothing to scroll past otherwise.

Accessibility

  • as="nav" gives a table of contents its landmark, and as="aside" marks a summary as complementary. Both are announced; a div is not.
  • The offset is sanitised, so a value coming from configuration or user data cannot end the declaration and inject its own.