Sidebar

Accessibility

Sidebar from @prepared911/ui/sidebar is the primary application navigation landmark. It renders a nav named by aria-label. Your job is to pass that name, give every row an icon and a visible label, and keep keyboard flow predictable between the sidebar and main.

What the component handles

Landmark role. Renders a navigation landmark; screen-reader rotor surfaces it as a named region.
Collapsed rail. collapsed is owned by Sidebar. The component does not ship a collapse control; an owner control outside the nav calls useSidebar.
Long labels. A label wider than its row fades out at its end and slides into view while a mouse hovers the row and while the row shows keyboard focus, with the same pause and pace; there is no ellipsis and no native title. A tooltip shows the full text while the label is cut, and it opens when a navigation key moves focus onto the row; Escape or moving focus away closes it. The label is never a second tab stop, so the row stays the only focus target, and a screen reader reads the full label from the row's text once. Reduced motion removes the slide, and the tooltip still shows.
Selected item state. SidebarItem exposes the active destination so screen readers announce "current page" appropriately.

What you must provide

aria-label on the sidebar. Match product language ("Main", "App", "Dispatch"). It is required. Without it, the landmark has no name.
Accessible names on items. Visible text is best. When items collapse to icon-only, each must retain an accessible name via aria-label or a visible tooltip that is readable by assistive tech.
Group labels. If the sidebar is organized into sections, label each group so navigation feels structured, not flat.
Focus restoration. When a sidebar item navigates to a route, ensure focus lands on the new page's main heading or a sensible target—don't leave focus inside the sidebar indefinitely.

Keyboard behavior

Tab moves into the sidebar and then through items in document order.
Enter activates the item (navigates or toggles a group).
Escape does not collapse the sidebar. Collapse is the owner's control, outside the landmark.
Skip link. Provide a skip-to-main-content link on the page so keyboard users don't have to tab through every sidebar item.

Semantics and roles

Sidebar root is a <nav> landmark with aria-label.
Grouping headers use native heading levels or role="group" with aria-label—choose per information architecture.
Active items use aria-current="page" for the current route.

Collapsed state

When collapsed to icon-only:

Each row keeps its label. In the rail the label is the link name and the tooltip text.
An owner-provided collapse control, if you add one, needs its own name. The sidebar does not render that control.
Keyboard users can still activate items without reaching the mouse.

Known caveats

Active state on nested routes. If one sidebar item represents multiple URL patterns, ensure aria-current reflects reality; a stale active state misleads assistive tech.
Mobile behavior. If the sidebar morphs into a drawer on narrow viewports, that drawer requires its own focus management (see Drawer).
Overflow menus. Items hidden behind an overflow menu must remain keyboard reachable from the overflow trigger, not just discoverable via mouse hover.

Sidebar / API and Development

Skeleton / Usage

On this page

What the component handles

What you must provide

Sidebar

Accessibility

What the component handles

Landmark role. Renders a navigation landmark; screen-reader rotor surfaces it as a named region.
Collapsed rail. collapsed is owned by Sidebar. The component does not ship a collapse control; an owner control outside the nav calls useSidebar.
Long labels. A label wider than its row fades out at its end and slides into view while a mouse hovers the row and while the row shows keyboard focus, with the same pause and pace; there is no ellipsis and no native title. A tooltip shows the full text while the label is cut, and it opens when a navigation key moves focus onto the row; Escape or moving focus away closes it. The label is never a second tab stop, so the row stays the only focus target, and a screen reader reads the full label from the row's text once. Reduced motion removes the slide, and the tooltip still shows.
Selected item state. SidebarItem exposes the active destination so screen readers announce "current page" appropriately.

What you must provide

aria-label on the sidebar. Match product language ("Main", "App", "Dispatch"). It is required. Without it, the landmark has no name.
Accessible names on items. Visible text is best. When items collapse to icon-only, each must retain an accessible name via aria-label or a visible tooltip that is readable by assistive tech.
Group labels. If the sidebar is organized into sections, label each group so navigation feels structured, not flat.
Focus restoration. When a sidebar item navigates to a route, ensure focus lands on the new page's main heading or a sensible target—don't leave focus inside the sidebar indefinitely.

Keyboard behavior

Tab moves into the sidebar and then through items in document order.
Enter activates the item (navigates or toggles a group).
Escape does not collapse the sidebar. Collapse is the owner's control, outside the landmark.
Skip link. Provide a skip-to-main-content link on the page so keyboard users don't have to tab through every sidebar item.

Semantics and roles

Sidebar root is a <nav> landmark with aria-label.
Grouping headers use native heading levels or role="group" with aria-label—choose per information architecture.
Active items use aria-current="page" for the current route.

Collapsed state

When collapsed to icon-only:

Each row keeps its label. In the rail the label is the link name and the tooltip text.
An owner-provided collapse control, if you add one, needs its own name. The sidebar does not render that control.
Keyboard users can still activate items without reaching the mouse.

Known caveats

Active state on nested routes. If one sidebar item represents multiple URL patterns, ensure aria-current reflects reality; a stale active state misleads assistive tech.
Mobile behavior. If the sidebar morphs into a drawer on narrow viewports, that drawer requires its own focus management (see Drawer).
Overflow menus. Items hidden behind an overflow menu must remain keyboard reachable from the overflow trigger, not just discoverable via mouse hover.

Sidebar / API and Development

Skeleton / Usage

On this page

What the component handles

What you must provide