Sidebar

Usage

Custom rather than a Bits wrapper — Bits ships no sidebar, and there is no hard behaviour to buy here. What a sidebar needs is a landmark, a labelled list, a shared collapsed state and a toggle that announces itself, all of which the platform gives directly.

Toggle it — the labels hide, the items stay reachable, and "Reports" is a non-link.

Why Provider is separate

Provider owns the state; Root is the <aside>. They are separate parts for one concrete reason: Svelte context reaches descendants, not siblings.

Put the state on Root and a Trigger sitting in a top bar next to the sidebar never sees it — and with collapsible="offcanvas" the Trigger has to be outside, or collapsing hides the only way back. A test caught exactly that: the Trigger got a null aria-controls and clicking it did nothing.

The Provider imposes no layout unless you pass shell. By default it is display: contents, so it is invisible to layout and the children sit where they would without it — which matters when the sidebar is a child of a grid your app already defined. shell opts into the flex row.

Collapse modes

• icon — narrows to a rail. Labels hide, items stay reachable.
• offcanvas — slides out entirely, and its contents become unfocusable so the cursor cannot vanish into a hidden panel.
• none — not collapsible; the Trigger becomes pointless.

collapsed is bindable on the Provider. Persist it — a sidebar that forgets its state on every navigation is worse than one that never collapsed.

Size it with --sve-sidebar-width and --sve-sidebar-width-icon rather than overriding rules.

No JS media query

The collapsed presentation is one CSS class. This component does not watch the viewport.

A library that swaps the markup for a drawer below some breakpoint hardcodes that breakpoint inside itself, cannot know it during server rendering, and flashes the wrong layout on hydration. collapsible="offcanvas" plus your breakpoint gets the same result, and your app decides when it happens.

Accessibility

• Root is a named <aside> — an app shell usually has more than one complementary region.
• Point each Group's aria-labelledby at its GroupLabel id. A visual heading assistive technology cannot connect to its items is decoration, not structure.
• On an icon rail the GroupLabel is hidden visually, not removed — deleting it would strip the group of its name for someone who has plenty of room for it.
• Give icon-only Items a label. It becomes the accessible name when collapsed; without it the rail is a column of unnamed links.
• Item sets aria-current="page" when active — not just a highlight, which tells sighted users and nobody else.
• disabled renders a <span>, not a link. A link that goes nowhere takes a tab stop and lies about what will happen.
• The Trigger's label stays the same in both states. aria-expanded already carries the state; a label that flips to "Close" says it twice and contradicts itself mid-announcement.

Not a docs sidebar

This is an app-shell panel: fixed header and footer, a scrolling middle, and an icon rail when collapsed. It is not the right shape for a documentation table of contents — like the one on the left of this page — which is a sticky list that becomes a disclosure panel on mobile.

We tried rebuilding this site's own navigation on top of it, as a test. Making it fit meant overriding display, flex-direction, width, border, background, overflow and the collapse mechanism itself — nearly everything the component provides. When you override that much you are fighting the component, not using it.

The exercise was still worth it: it is what surfaced the display: contents default on Provider and the disabled variant on Item, both of which are here because of it.

Props

Sidebar.Provider — collapsed is bindable.

Sidebar.Root

Sidebar.Item — plus the native anchor attributes.

Sidebar.Trigger

Header, Content, Footer, Group, GroupLabel and Menu each take class plus their native attributes.