Sidebar
App navigation down the side of the screen, collapsible to an icon rail.App sidebar
Preview
Code
DashboardCollapse the sidebar with the arrow button.
DashboardExpand the sidebar with the arrow button.
Installation
Package
CLI (copy source)
pnpm
pnpm add @advui/corenpm
npm install @advui/coreUsage
import { Sidebar } from '@advui/core'
import { HomeIcon } from '@advui/icons'
<Sidebar aria-label="App">
<Sidebar.Header>
<Sidebar.Toggle />
</Sidebar.Header>
<Sidebar.Content>
<Sidebar.Group label="Workspace">
<Sidebar.Item href="/" icon={<HomeIcon />} active>Dashboard</Sidebar.Item>
</Sidebar.Group>
</Sidebar.Content>
</Sidebar>Examples
In a drawer on phones
Preview
Code
API reference
Sidebar
| Prop | Type | Default | Description |
|---|---|---|---|
aria-label | string | 'Sidebar' | Names the navigation landmark. |
collapsed | boolean | — | Icon-only rail (64px instead of 256px). |
defaultCollapsed | boolean | — | Starting `collapsed` when uncontrolled. |
onCollapsedChange | (collapsed: boolean) => void | — | Called with the new `collapsed`. |
Sidebar.Header
The top row: brand and toggle.Sidebar.Content
The scrolling middle: groups and items.Sidebar.Footer
The bottom, such as the account.Sidebar.Group
| Prop | Type | Default | Description |
|---|---|---|---|
label | string | — | Heading that names the list; hidden but still read when collapsed. |
Sidebar.Item
| Prop | Type | Default | Description |
|---|---|---|---|
icon | ReactNode | — | Shown alone when collapsed. |
href | string | — | Link target. On iOS and Android a path goes to the router registered with `setRouter`, and an absolute URL opens with the system. |
onPress | (event) => void | — | Called before the `href` is followed; `event.preventDefault()` stops it. Without an `href`, navigate here. |
render | ReactElement | — | Your router’s link element. |
active | boolean | false | The current page (`aria-current="page"`). |
badge | ReactNode | — | A count or tag after the label. |
disabled | boolean | false | Not pressable. |
Sidebar.Toggle
Collapse / expand button (`aria-expanded`, `aria-controls`).| Prop | Type | Default | Description |
|---|---|---|---|
labels | { collapse: string; expand: string } | — | Button names, for translation. |
useSidebar()
`{ collapsed, setCollapsed }` for your own header and footer content.Accessibility
- A
navlandmark named byaria-label; each group is a list named by its label. - Items are links (
<a>withhref); the current page hasaria-current="page"on web, and "current page" in its name on native. - Collapsed, the labels and badges are visually hidden but stay in each link’s name, so the icon rail is still fully labelled.
- The toggle is a named button with
aria-expanded. Rows are 44pt tall on touch screens. - Inside
AppShell.Sidebarthe area is the navigation landmark, so the Sidebar does not add its own.
| Key | Action |
|---|---|
| Tab | Moves through the links and the toggle. |
| Enter | Follows the focused link. |
Responsive behavior
Give it the full height of the layout. In an AppShell, put it in AppShell.Sidebar: below the breakpoint it moves into the shell’s drawer, where it fills the width, does not collapse, and closes the drawer when an item is pressed. Elsewhere, hide it on phones (display="max-md:none") and put the same items in a Drawer.
Platform notes
Web
Sidebar.Content scrolls when the items overflow.iOS
Wrap long content in a ScrollArea to scroll it. A path in
href goes to the router registered with setRouter (since 0.15.0; before, items navigated only in onPress).Android
Same as iOS, with the ripple when the config has
androidRipple.