Components Sticky headers

Sticky headers

Slim re-pinned header bar that appears when the original page header scrolls out. Used on detail pages so the key title, status, and primary action stay reachable mid-scroll.

<koala-sticky-header>

Canonical

KQ-20260331-001 v1 New

<div x-data="{ isSticky: false, init() {} }">
    <div koala-sticky-header>
        <div class="flex items-center gap-2 min-w-0">
            <h2 class="font-semibold text-on-surface truncate">@Model.Reference</h2>
            <span koala-badge="Neutral" koala-badge-size="Small">@Model.Status</span>
        </div>
        <button koala-btn="Primary">Accept</button>
    </div>
    @* page content *@
</div>

The demo above is a static mock — the real bar is invisible until the page header scrolls past the sentinel, then it slides in at the shell's --page-sticky-top offset. The intended markup is shown above: wrap the page in an x-data declaring isSticky + init(), then mark the header <div> with koala-sticky-header.

Variants

3 variants

List variant

Quotes

View variant

KQ-20260331-001 v1 New

Filter variant

Reports

States

2 states

Hidden — top of page

sentinel intersecting — bar suppressed

Pinned — scrolled past sentinel

KQ-20260331-001

Props

2 attributes

Attribute	Values	Notes
koala-sticky-header	marker	Activates the helper on a `<div>`. Renders sentinel + fixed bar.
koala-sticky-header-max-width	Tailwind class	Inner max-width. Defaults to `max-w-screen-2xl`.

Do & don't

KQ-20260331-001 New

Do One title, one primary action, optional status. Truncate long titles — the bar is slim by design.

KQ-20260331-001 — 42 Maple Drive — Sale — Freehold — £450,000

Don't Don't cram the full title and every action onto the sticky bar — mid-scroll context, not the full page header.