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.
Canonical
KQ-20260331-001 v1
New
The bar is invisible until the page header scrolls past the sentinel; then it slides in from the top.
Variants
3 variantsList variant
Quotes
View variant
KQ-20260331-001 v1
New
Filter variant
Reports
States
2 statesHidden — top of page
sentinel intersecting — bar suppressed
Pinned — scrolled past sentinel
KQ-20260331-001
Props
2 attributes| Attribute | Type | 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.