Sidebar

The column beside an app's pages: its name, its main links, and what belongs at the bottom. It collapses to a rail of icons. Specification: docs/components/sidebar.md

Rail

The toggle (a Button with command="--canon-toggle-sidebar", aria-controls and aria-expanded, named "Sidebar") collapses it to a rail: data-display="icon" on the sidebar. One toggle, in the same place either way: in an App Shell the bar's start; without a bar, the sidebar's header (in a rail, under the mark). Icons only, the brand's mark only; names stay for screen readers, and each link's Tooltip shows them on hover and focus (tooltips in a Nav List show only in a rail). A section's sub-pages open beside it: click Scrumboard. They close when you choose one, press Esc, or click or Tab elsewhere.

Edge cases

Right to left, the sidebar is on the right, its line on its left, and a rail's sub-pages open to its left. A long brand name is cut (…).