i

Side navigation

Navigating · researched

A vertical list of links, often nested and collapsible, at the side of a page for moving between sections.

organism · Carbon: UI shell left panel · also called Side nav, Left panel, Navigation drawer, Sidebar · contains link

"UI shell left panel" is tied to Carbon's shell; "Side navigation" is plain.

Each block is the real component from that system’s own package, in an isolated frame. They are live: hover, focus and press them. Frames are drawn on white so systems compare on one ground, and a font a system licenses only for its own site (GOV.UK’s Transport) falls back to what the system itself specifies.

Ant Design

Menu (mode="inline") inside Layout.Sider superset native: no antd 6.6.5
Variants
vertical, horizontal, inline
Sizes
—
States documented
disabled
Accessibility guidance
no

Index said not shipped; it missed this. Menu with mode inline gives a vertical, nested, collapsible (inlineCollapsed) list, and the Layout docs place it in a collapsible Layout.Sider. No dedicated side-nav component; Menu also covers vertical popup and horizontal modes. Menu items use role=menu/menuitem on ul/li.

1 corrected on re-read
  • states_documented: null → ["disabled"] Menu item/submenu API: disabled

docs ↗ · code ↗

Carbon

UI shell left panel native: yes @carbon/react 1.117.0
Variants
—
Sizes
—
States documented
hover, focus, active
Accessibility guidance
yes

SideNav renders a nav element with ul item lists; props include isRail, isFixedNav, expanded.

1 corrected on re-read
  • urls: {"docs_url":"https://carbondesignsystem.com/components/UI-shell-left-panel/usage/","code_url":"https://github.com/carbon-design-system/carbon/tree/main/packages/react/src/components/UIShell"} → {"docs_url":"https://www.carbondesignsystem.com/building-blocks/core/components/ui-shell-left-panel/guidelines","code_url":"https://github.com/carbon-design-system/carbon/tree/main/packages/react/src/components/UIShell"} docs 200 after redirect to https://www.carbondesignsystem.com/building-blocks/core/components/ui-shell-left-panel/guidelines; code URL 200

docs ↗ · code ↗

GOV.UK

absentGOV.UK does not ship this component. Nothing is drawn in its place.

Checked: component index (https://design-system.service.gov.uk/components/ , 37 components), patterns index, styles index, repo tree src/govuk/components and objects, and installed govuk-frontend 6.5.1 components directory. No side navigation component. 'Navigate a service' pattern covers header and service navigation only; the Step by step navigation pattern is a sidebar for prototype use, from GOV.UK publishing components, not govuk-frontend. Styles/links page mentions side navigation in passing only.

Material Web

absentMaterial Web does not ship this component. Nothing is drawn in its place.

Index mapping holds but only as the panel: the drawer is a div role=dialog (aria-modal on the modal one) with a slot; the links come from content you slot in (e.g. md-list). Experimental labs code, shipped in the 2.5.0 package under labs/ without a docs page. docs/roadmap.md lists Navigation drawer as not built.

2 corrected on re-read
  • present: "ships" → "absent" labs-only: Absent as shipped: labs/navigationdrawer (md-navigation-drawer[-modal], div role=dialog + slot) is experimental labs code in the 2.5.0 package with no
  • urls: {"docs_url":null,"code_url":"https://github.com/material-components/material-web/tree/main/labs/navigationdrawer"} → {"docs_url":null,"code_url":null} no URLs for absent rows; repo tree API 1808 entries, not truncated

· code ↗

Primer

NavList native: yes @primer/react 38.40.1
Variants
—
Sizes
—
States documented
—
Accessibility guidance
yes

Primer React. NavList renders nav > ActionList (ul/li links), supports nested NavList.SubNav and groups; status ready. Older SideNav (src/SideNav.tsx) is marked deprecated in favour of NavList and has no docs page.

docs ↗ · code ↗

Spectrum

Side navigation native: partly
shipped, not drawn hereSpectrum documents this component, but it could not be drawn from the package used for the frames. The note below says why.
Variants
—
Sizes
—
States documented
default, hover, active, focus, disabled
Accessibility guidance
yes

Docs from the rsp page; implementations: S2 SideNav (marked alpha in its MDX; built on React Aria NavigationTree with div rows and links), SWC 1st-gen sp-sidenav (a nav element with anchor items) and spectrum-css sidenav 7.2.0 (nav/ul/li/a). Not in installed SWC 1.12.4 (no sidenav package). Index disagreement: it also mapped 'Side panel' here; S2 SidePanel is a collapsible container for app chrome, not a navigation list.

docs ↗ · code ↗

USWDS

Side navigation native: yes @uswds/uswds 3.14.0
Variants
—
Sizes
—
States documented
default, active
Accessibility guidance
yes

Agrees with index. Page states the component has no variants; nested sublists and a current-page marker are demonstrated.

1 corrected on re-read
  • states_documented: ["default"] → ["default","active"] guidance: use the "active" state for current page; usa-current in twig

docs ↗ · code ↗

Platform facts

Native elementnavSpec: nav 'is primarily intended for sections that consist of major navigation blocks'; MDN: a nav may be styled as sidebar; use aria-labelledby to tell several nav elements apart. APG Landmarks: 'the HTML nav element creates a navigation landmark region'. Spec: details is a disclosure widget and 'not a menu or tab widget'; APG Disclosure covers show/hide.
Baseline—
APG patternlandmarks
ARIA role—
Shipped by5 of 7 systems

Anatomy

  1. navigation landmark — Spec nav: 'a section of a page that links to other pages or to parts within the page'.
  2. links — Spec nav: navigation links; MDN: usually a list (ul) of links.
  3. nested / collapsible groups optional — APG Disclosure examples include 'Disclosure (Show/Hide) Navigation Menu'; not defined as a part of nav in HTML.

The seven states

default List of links.
hover Pointer-only CSS state; not defined by APG or HTML.
focus Each link is focusable.
active Pressed link; CSS :active.
disabled n/a — Not defined for nav; the Link pattern defines no disabled state.
error n/a — Not defined.
loading n/a — Not defined.

Every cell was read twice, the second time from raw sources by a separate pass. 5 of 35 fields changed on the second read — open any “corrected” note to see what it said before.