/// Navigation
StickyAccordion
Sticky-rail accordion — a pinned left rail (eyebrow, headline, illustration) beside a scrolling column of numbered rows that open one at a time.
import { StickyAccordion } from "@protocore/pds";Basics
Give the rail an eyebrow, title, and art, then pass the expandable items. The rail stays pinned while the numbered rows scroll; clicking a row reveals its body, one open at a time. It needs a tall container to show the sticky effect.
Asset Issuance
Connect to 150+ supported blockchains.
Controlled
Own the open row with open + onOpenChange to sync it with scroll position, analytics, or a deep link; otherwise use defaultOpen.
open: [ 01 ]
Protocol
The three roles that move a message.
When to use it
StickyAccordion is a landing-page deep-dive for *one idea, several facets* — a product whose capabilities you want to narrate while a headline and illustration stay anchored beside them.
- A plain FAQ or settings stack with no rail? Use the lighter Accordion.
- Presenting several distinct pillars side-by-side? Use TabbedShowcase.
- An ordered process with progress? Use Steps.
- Feed the
artslot a LineArt field and keep row bodies to a sentence.
Usage
Do
- Give it a tall container so the sticky rail has room to pin.
- Keep all rows about one theme — the rail states the single idea.
- Use a LineArt illustration anchored in the art slot.
- Keep row bodies short; this is a narrative surface, not a document.
Don't
- Don't use it for unrelated FAQ entries — that's a plain Accordion.
- Don't put more than ~6 rows in the scrolling column.
- Don't nest interactive forms inside a row body.
- Don't rely on it on very short pages where nothing scrolls past the rail.
Accessibility
| Keys | Action |
|---|---|
| Tab | Move focus across the numbered row buttons |
| Enter / Space | Open the focused row (closing the previously open one) |
- Each row is a real `<button>` with `aria-expanded` reflecting whether its body is shown.
- The `[ 0N ]` row index is `aria-hidden` decoration; the row title is the button's accessible name.
- The rail is presentational — the interactive control is the row list.
StickyAccordion props
| Prop | Type | Default | Description |
|---|---|---|---|
art | ReactNode | — | Illustration anchored to the bottom of the sticky rail (e.g. a `<LineArt>`). |
className | string | — | |
defaultOpen | number | 0 | Uncontrolled initial open index. Default 0. |
eyebrow | ReactNode | — | Mono eyebrow at the top of the sticky rail. |
items * | AccordionItem[] | — | The expandable numbered rows. |
onOpenChange | ((index: number) => void) | — | Fires with the next open index whenever a row is toggled. |
open | number | — | Controlled open index. Pair with `onOpenChange`. |
rail | ReactNode | — | Fully custom rail content (overrides eyebrow/title/art). |
style | CSSProperties | — | |
title | ReactNode | — | Display headline in the sticky rail. |