Sidebar

The shell's navigation column: groups, icon slots, a footer, and a rail form when narrow.

.sidebarCSS only

Examples

Rail, labels hidden

The shell's data-rail makes the column narrow; data-labels="hidden" leaves only the icons.

Main content

Anatomy

`nav.sidebar`	A sticky, scrolling column. Usually the first child of a `.shell`, which sets its width (see Shell).
`> h6, > details > summary`	Group headings. A `<details>` group collapses; its summary carries a chevron.
`a`	One destination. Optional `> i` icon slot and a `> span` label, which the rail form needs.
`> footer`	Optional. Pushed to the bottom, for the account or settings.

API

Attribute	Values	Description
`aria-current`	`page`	On a link: accent text, tint and an accent edge on the start side.
`data-labels`	`hidden`	In the rail form, hides the `<span>` labels visually (they stay readable to screen readers). Default shows them small under the icon.

Accessibility

Use <nav> with an aria-label ("Main") so it is a named landmark.
In the rail form give every link a <span> label, even with data-labels="hidden": it is the link's accessible name.
Under 48rem the sidebar becomes a horizontal scrolling row and hides headings and the footer, so don't put anything there that has no other route.