placement=sidebar — icon + label
placement=sidebar — text only
placement=navbar
placement=navbar — with icons
placement=subnav
placement=rail — icon prop (recommended)
Use icon= and aria-label — no visible text children.
placement=rail — icon as children
Passing the SVG as children also works when aria-label is set.
placement=rail — in SideRail context
Active vs inactive (rail)
Rail accessibility
Icon-only rail items need an
aria-label (or a string child for the name). Prefer icon={<Icon />} over nesting the SVG alone.Animation variants
animationVariant — click each control to compare press feedback.
API
| Prop | Required | Type | Default | Description |
|---|---|---|---|---|
| theme | Optional | SiteTheme | atelier | Visual theme. |
| mode | Optional | "light" | "dark" | light | Color mode. |
| placement | Optional | "sidebar" | "navbar" | "subnav" | "rail" | sidebar | Chrome context — adjusts padding and active styling. |
| active | Optional | boolean | false | Current page / section. |
| icon | Optional | ReactNode | — | Leading icon (required visual for rail). |
| aria-label | Optional | string | — | Required for placement=rail when children is not a string. |
| href | Optional | string | — | Navigation target. |
| children | Optional | ReactNode | — | Label text, or icon element for rail. |
| animationVariant | Optional | PressAnimationVariant | default | Press animation — default, none, ripple, scale, sink, lift, pulse, or glow. |