Navigation

AppSidebar

The side navigation of a web app: a workspace menu with quick actions on top, compact links with counts, and sections that fold. Pair it with AppShell layout="sidebar".

import { AppSidebar, WorkspaceSwitcher, AppNavSection, AppNavItem } from '@alea/ui';

Examples

Web app layout

AppShell with layout="sidebar": the workspace menu and compact links on the left, the page in an inset panel. Narrow the window: the sidebar moves into a drawer.

Sections that fold

A titled AppNavSection folds with its chevron; the first, untitled one stays open. Counts sit on the right.

Tokens

The design tokens this component reads, with their value in the current theme. Override any of them to restyle it.

Color

--alea-border…

Space

--alea-space-1…
--alea-space-2…
--alea-space-3…
--alea-space-4…

Props

`AppSidebar` props

The side navigation of a web app: a workspace switcher on top, compact links, sections that fold. Pair it with AppShell layout="sidebar".

Prop	Type	Default	Description
`children`required	`ReactNode`	-	AppNavSections and AppNavItems.
`aria-label`	`string`	-	Name of the navigation. Default "Sidebar".
`className`	`string`	-	Extra class names for the root element.
`footer`	`ReactNode`	-	The bottom: an invite button, a plan meter, help.
`header`	`ReactNode`	-	The top: usually a WorkspaceSwitcher. Stays in place while the links scroll.

`WorkspaceSwitcher` props

The workspace name at the top of the sidebar: a menu to switch workspaces, with quick actions beside it.

Prop	Type	Default	Description
`name`required	`ReactNode`	-	The workspace or product name.
`actions`	`ReactNode`	-	Icon buttons on the right: search, new item.
`aria-label`	`string`	-	Name of the menu button. Default "{name}, workspace menu" when name is text.
`children`	`ReactNode`	-	The menu: MenuItems to switch workspaces, settings, sign out. Without it the name is plain text.
`logo`	`ReactNode`	-	A logo or mark before the name (about 20 px).
`onAction`	`((key: string \| number) => void)`	-	Called with the menu item's id.

`AppNavSection` props

A group of links in the AppSidebar; with a title it folds.

Prop	Type	Default	Description
`children`required	`ReactNode`	-	The AppNavItems.
`action`	`ReactNode`	-	Something on the right of the title: an add button.
`collapsible`	`boolean`	-	People can fold it (a chevron next to the title). Default true when there is a title.
`defaultExpanded`	`boolean`	`true`	Open at first. Default true.
`title`	`ReactNode`	-	The section's name, small and muted. Leave it out for the first, main group.

`AppNavItem` props

Show 10 inherited props

A compact link in the AppSidebar: icon, label and an optional count.

Prop	Type	Default	Description
`end`	`ReactNode`	-	A count, a badge or a shortcut on the right.
`icon`	`ReactNode`	-	A 16 px icon before the label.
`isCurrent`	`boolean`	-	Marks the current page (aria-current).

Specs

Generated from the source: the variants in the types, the states and tokens in the CSS, and the motion patterns that apply. The grids render the real component in both themes; the numbers are measured from the page.

`AppSidebar`

Dark and light: Every color comes from theme tokens, so it follows data-theme (and presets like Graphite) on the page or any wrapper. Contrast is checked in both themes.
Styling hooks: .alea-appnav.alea-appnav-header.alea-appnav-body.alea-appnav-footer

`WorkspaceSwitcher`

States: HoverPressed
Dark and light: Every color comes from theme tokens, so it follows data-theme (and presets like Graphite) on the page or any wrapper. Contrast is checked in both themes.
Styling hooks: .alea-ws-logo.alea-ws-name.alea-ws-chevron.alea-ws.alea-ws-button.alea-ws-actions
Data attributes: data-static

`AppNavSection`

States: Hover (CSS)Open
Dark and light: Every color comes from theme tokens, so it follows data-theme (and presets like Graphite) on the page or any wrapper. Contrast is checked in both themes.
Styling hooks: .alea-navsec.alea-navsec-head.alea-navsec-title.alea-navsec-chevron.alea-navsec-action.alea-navsec-list

`AppNavItem`

States: HoverCurrent
Dark and light: Every color comes from theme tokens, so it follows data-theme (and presets like Graphite) on the page or any wrapper. Contrast is checked in both themes.
Styling hooks: .alea-navitem.alea-navitem-icon.alea-navitem-label.alea-navitem-end
Data attributes: data-variant=filleddata-variant=segmentdata-appearance=soft

The links are a navigation landmark with its own name.
The current page is marked with aria-current.
A section title is a button with aria-expanded that controls its list.
The workspace menu is a menu button; its name says it opens the workspace menu.

Keyboard

Key	Does
`Tab`	Moves through the workspace menu, the actions, the section titles and the links
`Enter` or `Space on a section title`	Folds or opens the section
`Enter on the workspace name`	Opens the menu; arrows move, Escape closes

Do and don't

Keep the first section untitled: the places people go most.
Use 16 px icons and short labels.
Put counts that need attention in end.

Don't

Don't nest sections inside sections: use a Tree.
Don't put more than about a dozen links before the first fold.

Examples

Web app layout

Sections that fold

Tokens

Color

Space

Props

AppSidebar props

WorkspaceSwitcher props

AppNavSection props

AppNavItem props