Side navigation
DraftA vertical navigation panel for sidebar layouts with nested items, collapsible groups, and active-state highlighting.
- Usage
- Specs
- Content
- Status & changelog
- Code
Common alternative names
Sidebar, nav rail, side menu
Usage guidelines coming soon.
Specs coming soon.
Content guidelines coming soon.
Status & changelog coming soon.
Usage
import { SideNavigation } from '@arch-ui/components';
function AppSidebar() {
return (
<SideNavigation
items={[
{ label: 'Dashboard', href: '/dashboard', icon: <DashboardIcon /> },
{
label: 'Settings',
icon: <SettingsIcon />,
children: [
{ label: 'General', href: '/settings/general' },
{ label: 'Security', href: '/settings/security' },
],
},
{ label: 'Help', href: '/help', icon: <HelpIcon /> },
]}
activeHref="/settings/general"
/>
);
}
Expected props
| Prop | Type | Default | Description |
|---|---|---|---|
items | SideNavItem[] | -- | Array of navigation items, optionally nested. |
activeHref | string | -- | The href of the currently active page, used to highlight the matching item. |
collapsed | boolean | false | When true, the sidebar shows only icons (rail mode). |
onNavigate | (href: string) => void | -- | Called when the user clicks a navigation link. |
className | string | -- | Additional class names. |
SideNavItem
| Prop | Type | Description |
|---|---|---|
label | string | Visible text for the navigation item. |
href | string | Destination URL. Omit for group headers with children. |
icon | ReactNode | Optional icon rendered before the label. |
children | SideNavItem[] | Nested sub-items rendered in a collapsible group. |
badge | ReactNode | Optional badge or count rendered after the label. |
Nested groups
Items with a children array render as collapsible sections. Clicking the group header expands or collapses the sub-items.
<SideNavigation
items={[
{
label: 'Components',
icon: <ComponentIcon />,
children: [
{ label: 'Button', href: '/components/button' },
{ label: 'Card', href: '/components/card' },
{ label: 'Modal', href: '/components/modal' },
],
},
]}
activeHref="/components/card"
/>
Collapsed (rail) mode
When collapsed is true, the sidebar narrows to show only icons. Hovering or focusing an item can reveal a tooltip with the label. This mode is useful for maximising content area while keeping navigation accessible.
Accessibility
- Renders inside a
<nav>landmark witharia-label="Side navigation". - Collapsible groups use
aria-expandedon the toggle button to communicate their state. - The active item carries
aria-current="page". - In collapsed (rail) mode, each icon-only item needs a tooltip or
aria-labelproviding the full label text. - Keyboard users can navigate items with Tab and expand/collapse groups with Enter or Space.