Sidebar navigation for applications

Application navigation with a rail on tablets and a drawer or tab bar on phones.

5 variants

Switch category

Full, collapsed or floating

In an application the sidebar is the map. The five sidebars here hold your sections as data with icons, counts and nested items, and they change shape with the screen, full on desktop, a slim rail on tablets and a drawer or tab bar on phones.

Full shows every label and suits apps with up to a dozen areas. Collapsed icons gives the content more width and expands on demand. Workspace switcher puts teams or projects at the top for multi-tenant products. With sections groups items under headings, Floating detaches the sidebar from the edge for a lighter look.

Keep the order stable, people navigate by position as much as by label. Mark the active item, the components set aria-current for you. Icons alone are not enough, the collapsed variant keeps each label as a tooltip and for screen readers.

Full

Brand, search, navigation with counts, help and the account at the bottom.

Collapsed icons

A slim rail with labels on hover and focus, expandable. Phones get a tab bar.

Workspace switcher

A switcher on top for teams with several workspaces, with arrow keys.

With sections

Collapsible groups for favorites, projects with colors and nested teams.

Floating

A raised card beside the page with a usage card. Phones get a floating tab bar.

Details

What Sidebar brings along, read from the registry and the source.

Area: Layout
Variants: 5
Version: 1.0.1 · since 1.0.0
File: components/ui/sidebar.tsx
Brings along: utilskitbutton icon
npm packages: None
Languages: English and German, 11 texts of its own
Studio: Adjust in code
In collections: App dashboard
Build with AI: Over MCP in Claude, Cursor, Copilot and Codex

Props

The SidebarProps interface from components/ui/sidebar.tsx, with the comments from the code.

variantoptional
SidebarVariant
fullcollapsed-iconswith-workspace-switcherwith-sectionsfloating
brandrequired
{ name: string; href?: string; logo?: React.ReactNode }
itemsrequired
SidebarItem[]
The main navigation
sectionsoptional
SidebarSection[]
with-sections: groups like Favorites, Projects, Teams
footerItemsoptional
SidebarItem[]
Help, settings and the like, pinned to the bottom
workspacesoptional
Workspace[]
with-workspace-switcher
activeWorkspaceoptional
number
useroptional
{ name: string; email: string }
userMenuoptional
SidebarItem[]
promooptional
{ title: string; description?: string; action?: { label: string; href: string }; progress?: number }
floating: a card at the bottom, e.g. storage or plan usage
mobileoptional
'drawer' | 'tabs'
Phones: a drawer from the left, or a tab bar at the bottom with the first four items
titleoptional
string
Title in the phone top bar instead of the brand
childrenoptional
React.ReactNode
The page next to the sidebar

Built-in texts

Sidebar writes these texts itself. The language follows the KitProvider, the labels prop replaces single ones.

Show all 11 texts

Key	English	German
nav	English Sidebar	German Seitenleiste
open	English Open navigation	German Navigation öffnen
close	English Close navigation	German Navigation schließen
collapse	English Collapse sidebar	German Seitenleiste einklappen
expand	English Expand sidebar	German Seitenleiste ausklappen
search	English Search	German Suchen
workspaces	English Workspaces	German Arbeitsbereiche
newWorkspace	English Create workspace	German Arbeitsbereich anlegen
account	English Account	German Konto
more	English More	German Mehr
toggleSection	English Show or hide	German Ein- oder ausblenden

Read from the source of the component.

Sidebar handles the keys Escape, Arrow up, Arrow down, Home, End, Tab and Space itself.
Sets aria-checked, aria-controls, aria-current, aria-expanded, aria-haspopup, aria-label, aria-modal, aria-valuemax, aria-valuemin and aria-valuenow, so screen readers announce purpose and state.
Uses the roles dialog, menu, menuitem, menuitemradio and progressbar.
Adds text for screen readers where icons and graphics stand alone.
Shows a visible focus ring when used with the keyboard.
The server renders the starting state in full, JavaScript only adds the interaction.

Motion

Rises in briefly the first time it comes into view (kit-rise, useInView).
Moves with the scroll, its progress follows the position on the page.
Brings animations of its own, calmly timed and without wobble.
With reduced motion (prefers-reduced-motion) it stays still. 8 places in the code switch motion off then.

Frequent questions

How do I install Sidebar?

With aiw add @ai-website/sidebar. The command puts components/ui/sidebar.tsx into your project, the code is yours from then on. It brings along button and icon. It needs no further npm packages.

Which variants does Sidebar have?

5 variants, Full, Collapsed icons, Workspace switcher, With sections and Floating. You pick one with the variant prop, for example variant="collapsed-icons".

Can I translate the texts of Sidebar?

Yes. Sidebar carries 11 texts of its own in English and German, such as “Sidebar”, “Open navigation” and “Close navigation”. The language follows the KitProvider, single texts change through the labels prop.

Can an AI assistant build with Sidebar?

Yes. Through the MCP server of the aiw CLI, Claude, Cursor, GitHub Copilot, Windsurf, Codex and Gemini find Sidebar with aiw_components and install it with aiw_add @ai-website/sidebar. Name the variant in your prompt, for example variant="full", and the assistant writes your content straight into the props.

Similar components

More from Layout, the same area of the kit.

Often combined with

Sections that usually sit next to Sidebars on a page.