A 56px icon rail. Hovering or focusing an item opens a flyout with its submenu, and items without a submenu show a tooltip. Arrow keys move through the rail.
Projects
npx shadcn@latest add https://hyperblur.dev/r/sidebar-rail.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/sidebar-rail.tsx.
import { SidebarRail } from "@/components/hyperblur/sidebar-rail"
<div style={{ height: 420 }}><SidebarRail defaultOpenId="projects" /></div>| Prop | Type | Default | Description |
|---|---|---|---|
| items | { id: string; label: string; icon?: ReactNode; href?: string; links?: { id: string; label: string; badge?: string | number; href?: string }[] }[] | sample items | Rail items. An item with `links` opens a flyout, an item without them acts as a direct link or button. |
| active | string | Controlled active id. A rail item is highlighted when its own id or any of its link ids matches. | |
| defaultActive | string | Initial active id when uncontrolled. | |
| onChange | (id: string) => void | Called when an item or a flyout link is chosen. | |
| openId | string | null | Controlled id of the item whose flyout is open. Pair with onOpenChange. | |
| defaultOpenId | string | null | null | Item whose flyout starts open when uncontrolled. |
| onOpenChange | (id: string | null) => void | Called when a flyout opens or closes. | |
| brand | ReactNode | Mark shown at the top of the rail. | |
| footer | ReactNode | Content pinned to the bottom of the rail, such as an avatar. | |
| flyoutWidth | number | 176 | Width of the flyout panel in pixels. |
| itemSize | number | 40 | Width and height of each rail button in pixels. |
| color | string | "#2f7bff" | Accent color for the active bar, markers and focus rings. |