Grouped App Sidebar
Brand header, search trigger, labelled link groups and a user row, with each group announced as a list and the active link marked aria-current.
All blocksProduct
Sidebars
11 blocks in this category, each rendered live below. Open any of them for the full source and a copy button.
A block is one finished section of a page — a pricing table, a hero, a footer.
Collapsible Icon-Rail Sidebar
Folds between a full list and an icon rail without losing any accessible names, with a Ctrl/Cmd+B shortcut and tooltips that show on keyboard focus too.
Rail Plus Secondary Panel
A narrow rail of labelled sections beside a panel that lists the pages inside the chosen one, for products with more destinations than one list can hold.
Nested Accordion Sidebar
Groups that fold open to child pages, starting with the group that owns the current page already open and every aria-controls resolving.
Sidebar With Workspace Switcher
A header that opens a real menu of workspaces: arrow keys, Home/End, Escape returning focus to the trigger, and checked state announced as a radio choice.
Floating Inset Sidebar
A floating card on a tinted canvas beside an inset content surface, with a labelled usage meter and an upgrade card that is one skippable Tab stop.
Resizable Sidebar With Splitter
A drag handle that is also a keyboard-operable separator, with arrow keys that swap in RTL, pointer capture for touch and pen, and double-click to reset.
Docs Sidebar With Filter
Version picker, a labelled filter that announces its match count, and sections that vanish rather than leave a heading over an empty list.
Chat History Sidebar
Conversations grouped by recency with a per-row pin toggle that announces itself, and a hover control that stays reachable by keyboard and on touch.
Mail Folders Sidebar
Compose button, folders whose unread counts are spoken, colour labels that never rely on colour alone, and a storage meter with a text warning.
File Explorer Tree Sidebar
A real ARIA tree with roving focus, arrow-key expand and collapse, type-ahead and one tab stop, drawn flat so a screen reader is told the structure.