SidebarNav
Grouped links with an active page, counts and nested projects.
In context
Harbour rebrand
On track
Tideline mobile
Review
Crew interviews
Late
Rota export
Done
Harbour rebrand
On track
Tideline mobile
Review
Crew interviews
Late
Rota export
Done
Props
| Prop | Type | Required | Default |
|---|---|---|---|
items | SidebarNavEntry[] | Yes | — |
renderLink | ((props: { href: string; children: ReactNode; className?: string | undefined; }) => ReactNode) | undefined | No | — |
collapsed | boolean | undefined | No | — |
defaultCollapsed | boolean | undefined | No | false |
onCollapsedChange | ((collapsed: boolean) => void) | undefined | No | — |
hideCollapseToggle | boolean | undefined | No | false |
logo | SidebarNavLogo | undefined | No | — |
header | ReactNode | ((ctx: { collapsed: boolean; }) => ReactNode) | No | — |
panel | ReactNode | ((ctx: { collapsed: boolean; }) => ReactNode) | No | — |
footer | ReactNode | ((ctx: { collapsed: boolean; }) => ReactNode) | No | — |
variant | "list" | "grid" | undefined | No | list |
labelPlacement | "inline" | "below" | undefined | No | inline |
workspace | SidebarNavWorkspace | undefined | No | — |
search | SidebarNavSearch | undefined | No | — |
activeStyle | "tint" | "bar" | "fill" | undefined | No | tint |
collapseTogglePlacement | "inline" | "edge" | "edge-hover" | undefined | No | inline |
aria-label | string | undefined | No | Main |
className | string | undefined | No | — |
bionic | boolean | undefined | No | — |
bionicOptions | BionicOptions | undefined | No | — |
Slots and entries
logo swaps between full and compact as the rail collapses; header, workspace, search, panel and footer take the rest of a real dashboard sidebar. Besides items (one level of nested items, a badge, active), the list accepts { type: "heading" } and { type: "divider" } entries. activeStyle is "tint", "bar" or "fill"; collapseTogglePlacement is "inline", "edge" or "edge-hover".
Accessibility
Collapsed, every link keeps its full label as the accessible name (and a native title tooltip); the active item carries aria-current="page"; groups are real disclosure buttons.
data-rebar-* attributes
data-rebar-component="sidebar-nav", data-rebar-collapsed when collapsed; parts: logo, header, workspace, search, list, heading, divider, item, sublist, subitem, badge, panel, footer, collapse-toggle.
Migrating to Ant Design
AntD's Menu in inline mode inside a Layout.Sider is a close structural match (items/icon/nested sub-menus map across; collapsed maps to the Sider's own prop). Not yet codemod-covered.