# Sidebar navigation

Sidebar navigation: a free component, built on your design tokens, to use as the main navigation of a work app. The left rail of a work app: workspace switcher, search with a shortcut, grouped pages with counts, a collapsible group and the signed-in person.

Prompt: Add the OpenDesigner component sidebar-nav to this project: https://opendesigner.dev/library/r/sidebar-nav.html. Keep its markup and states; map its --ds-* variables to my tokens.

States: hover, focus, current page, unread count, collapsed group, expanded group, online.

Accessibility: A nav landmark with labelled lists; the current page carries aria-current="page", the collapsible group is a native details/summary, and the switcher and person menus are buttons with aria-haspopup.

File: https://opendesigner.dev/library/r/sidebar-nav.html