components / global
sidebar
Sidebar is the shared navigation primitive used across the docs app and FS. The exported pieces keep layout, overlay, brand, nav-group, and item behaviors separate so app shells can swap in their own content without re-authoring sidebar structure or drawer behavior.
| field | value |
| group | global |
| import | @arieare/ds |
| source | packages/ds/src/components/sidebar/Sidebar.tsx
packages/ds/src/components/sidebar/sidebar.css |
Docs and FS now consume the shared sidebar primitives directly.
component tokens
| token | source | description |
--sidebar-w / --sidebar-bg / --sidebar-line | @arieare/ds/tokens.css | Controls shell width, background, and divider lines. |
--sidebar-item-h / --sidebar-item-radius / --sidebar-item-icon-size | @arieare/ds/tokens.css | Sets item sizing and icon scale for the shared sidebar system. |
--sidebar-item-ink-* / --sidebar-item-hover-bg / --sidebar-item-active-bg | @arieare/ds/tokens.css | Defines default, hover, and active item color treatment. |
props
| prop | type | default | description |
SidebarShell.isOpen | boolean | false | Controls the mobile drawer open state. |
SidebarOverlay.visible / onClick | boolean / MouseEventHandler | — | Shows the scrim and wires the close action. |
SidebarBrand.name / subtitle | ReactNode | — | Sets the primary and secondary brand copy. |
SidebarNav.label / navAriaLabel | string | — | Defines the visible section label and assistive navigation label. |
SidebarNavItem.label / href / icon / trailing / active / external | mixed | — | Controls item text, link behavior, icon slot, trailing badge slot, and active state. |
SidebarNavGroup.label | string | — | Trigger label shown as the group heading (the folder name). |
SidebarNavGroup.icon | ReactNode | — | Optional leading icon for the group trigger. |
SidebarNavGroup.defaultOpen | boolean | false | Initial open state (uncontrolled). Children are indented and shown when open. |
SidebarNavGroup.open | boolean | — | Controlled open state. Pair with onOpenChange for external toggle control. |
SidebarNavGroup.onOpenChange | (open: boolean) => void | — | Callback fired when the group is toggled. Receives the next open state. |
SidebarFooter children | ReactNode | — | Pinned bottom slot for secondary nav or logout actions. |