Expanding Side Rail
A compact sidebar that reveals its navigation labels when you hover over it or focus a link.
- Dependencies
- No extra packages
- Size
- 331 lines
- Controls
- 9 controls
Installation
CLI · shadcn registry
npx shadcn@latest add https://ui.onycx.dev/r/expanding-side-rail.json1 · Dependencies
None beyond React and Tailwind.
2 · Copy the source
components/onycx/expanding-side-rail.tsx
Requires React 19 and Tailwind CSS v4. Copy the source from the expanding-side-rail.tsx tab after tweaking: your values are baked in as the new defaults. Exported image examples use portable sample artwork. Replace it with your own media as needed.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| brand / brandHref | string | "ONYCX" / "#home" | Serif wordmark with the 6s gold shimmer (18px, .32em tracking). |
| items | SideRailItem[] | — | { label, href, icon } where icon is "home" | "collection" | "craft" | "discovery" | "journal" | "bespoke" | "contact" | "search" | "bag" | "lock". |
| activeHref | string | "#home" | Item that gets aria-current="page", the 3px bar and the glow. |
| utilityLabel / utilityHref | string | "Private Access" / "#bespoke" | Bottom lock link that turns gold on hover. Empty label hides it. |
| showMotionToggle / onMotionChange | boolean / (on) => void | true | The original Motion on/off switch (aria-pressed). Wire onMotionChange to your own motion preference. |
| collapsedWidth / expandedWidth | number | 92 / 268 | Rail widths. |
| accent / glow | string | "#c8ae80" / "#8b1e2d" | Gold bar, switch and utility hover; wine glow behind the active link (35%). |
| position | "fixed" | "absolute" | "fixed" | Inset 14px top and bottom, 10px left of the viewport or the positioned parent. |
| hideBelow | "none" | "md" | "lg" | "xl" | "lg" | Breakpoint below which the rail is hidden, as in the original. The demo forces none. |