Interactive playground for every sidebar variant, collapsible mode, side, overlay, open-on-hover and backdrop.

Full application chrome with a workspace switcher in the header, grouped navigation and a user menu in the footer using the Menu component. Collapses to icon mode.

Below 1024px the sidebar turns into an offcanvas overlay with a backdrop. Above that it stays in icon mode pushing the inset. Use a matchMedia reactive flag to switch between the two layouts.

Two sidebars on opposite sides of the layout: a primary navigation on the left (icon-collapsible) and a secondary AI chat panel on the right (offcanvas). Each SidebarTrigger targets its sidebar by id.

Two stacked sidebars within a single SidebarLayout: a hover-to-open icon bar (icon mode + overlay) and a secondary panel that stays open on desktop and collapses to an offcanvas overlay on smaller screens. IDE-like layout.

Menu items become collapsible to reveal a nested SidebarMenuSub with deep trees and active-state tracking.

Chat history sidebar with grouped conversations (Today, Yesterday, Previous 7 days, Previous 30 days). Each item exposes a hover-only delete action. Pinned shortcuts at the top: Search, New chat, Browse web.

Screen Reader

Sidebar is a headless compound component and does not define a specific ARIA role by default. Use semantic elements such as nav or aside with aria-label or aria-labelledby to describe the purpose of the sidebar based on your layout.

SidebarTrigger describes the relationship with the sidebar on its own: it exposes the current state with aria-expanded and adds aria-controls whenever the sidebar it controls has an id, which is rendered on the sidebar root. In layouts with multiple sidebars, provide the target prop to SidebarTrigger so it toggles and describes the intended sidebar.

SidebarMenu renders a semantic list structure by default. Menu items are expected to contain interactive elements such as links or buttons. Collapsible SidebarMenuItem components add aria-expanded to their SidebarMenuButton automatically.

Menu buttons are navigable as a single tree with the arrow keys, no matter how many SidebarMenu or SidebarGroup blocks they are split across. Navigation visits only the rows that are actually visible, so the children of a collapsed item are skipped. There is no roving tabindex, so every menu button also stays reachable with tab. A menu button that opens its own popup, marked with aria-haspopup, keeps its own key handling.

Trigger Keyboard Support

Menu Keyboard Support