i

Navigation bar

Navigating · researched

A horizontal row of links or tabs for moving between the main sections of a site or app.

organism · also called Primary navigation, Top navigation, Tab bar · contains link

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="horizontal") 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 horizontal is the documented top navigation bar (overflowing items collapse). It is the same component as vertical/inline Menu.

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

docs ↗ · code ↗

Carbon

UI shell header navigation subset native: yes @carbon/react 1.117.0
Variants
—
Sizes
—
States documented
—
Accessibility guidance
yes

Index said not shipped. HeaderNavigation renders nav > ul of HeaderMenuItem links in the shell header; it is a part of UI shell header, not a standalone bar. Tabs cover the tab-bar label separately.

1 corrected on re-read
  • urls: {"docs_url":"https://carbondesignsystem.com/components/UI-shell-header/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-header/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-header/guidelines; code URL 200

docs ↗ · code ↗

GOV.UK

Service navigation native: partly govuk-frontend 6.5.1
Variants
Showing your service name only, Showing service name and navigation links, Adding language navigation
Sizes
—
States documented
default, focus
Accessibility guidance
yes

Index flagged this system as not shipping it but listed Service navigation as an instance; it does the job (service name plus a row of links, collapsing behind a Menu button on mobile). Renders nav and a button; links are plain anchors. Header also holds navigation links.

3 corrected on re-read
  • variants: null → ["Showing your service name only","Showing service name and navigation links","Adding language navigation"] Docs headings
  • states_documented: null → ["default","focus"] scss has :focus; fixtures include current/active item
  • a11y_documented: "no" → "yes" Page section: "Make sure the ‘aria-label’ is accurate for users of assistive technology"

docs ↗ · code ↗

Material Web

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

Agree with index. Bottom bar for compact screens; div role=tablist of md-navigation-tab (role=tab, aria-selected), not links. Experimental labs code in the 2.5.0 package, no docs page; roadmap lists Navigation bar as not built. A newer GB nav bar (labs/gb/components/navbar) exists on main only. Published Tabs (tabs.md) is a separate, documented top-of-content tab row.

2 corrected on re-read
  • present: "ships" → "absent" labs-only: Absent as shipped: labs/navigationbar + navigationtab (div role=tablist) is experimental labs code in 2.5.0 with no docs; roadmap lists Navigation bar
  • urls: {"docs_url":null,"code_url":"https://github.com/material-components/material-web/tree/main/labs/navigationbar"} → {"docs_url":null,"code_url":null} no URLs for absent rows; repo tree API 1808 entries, not truncated

· code ↗

Primer

UnderlineNav native: yes @primer/react 38.40.1
Variants
inset, flush
Sizes
—
States documented
loading
Accessibility guidance
yes

Primer React. UnderlineNav is the current component (status ready; collapses overflow into a menu). TabNav (deprecated, role=tablist inside nav), SubNav (no docs page) and src/deprecated/UnderlineNav are older. Index also mapped the Navigation UI pattern (low); that is guidance only.

2 corrected on re-read
  • builds_on_native: "partly" → "yes" Default as='nav' containing ul and a links; overflow menu is extra
  • states_documented: null → ["loading"] loadingCounters prop: items in loading state

docs ↗ · code ↗

Spectrum

Top nav 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
s, m, l, xl
States documented
—
Accessibility guidance
yes

Implementation: SWC 1st-gen sp-top-nav and sp-top-nav-item only (anchor items in a div, per the package source); no S2, v3 or spectrum-css counterpart, and no spectrum.adobe.com page. Not in installed SWC 1.12.4 (no top-nav package). Docs page not read.

2 corrected on re-read
  • sizes: null → ["s","m","l","xl"] Docs Sizes section demonstrates size s, m, l, xl
  • a11y_documented: "unread" → "yes" SWC page has Accessibility: ARIA attributes (role=navigation, aria-current), Keyboard interaction, Best practices

docs ↗ · code ↗

USWDS

Nav (part of Header) subset native: yes @uswds/uswds 3.14.0
Variants
—
Sizes
—
States documented
default
Accessibility guidance
yes

Index mapped the inventory entry Nav at medium confidence. Nav has no docs page; it is the primary/secondary navigation lists and mobile sliding menu inside Header, so it is a part of Header and not a free-standing navigation bar. Read via the Header page.

docs ↗ · code ↗

Platform facts

Native elementnavSpec: nav is 'primarily intended for sections that consist of major navigation blocks'. APG Landmarks: nav creates a navigation landmark region. MDN: a list of links inside nav is common; use aria-labelledby if there are several. 'Tabs' in the definition would be the APG Tabs pattern, which is for panels, not site navigation.
Baseline—
APG patternlandmarks
ARIA role—
Shipped by6 of 7 systems

Anatomy

  1. navigation landmark — Spec nav element.
  2. links — Spec nav: links to other pages or parts within the page.

The seven states

default Row of links.
hover Pointer-only CSS state; not defined by APG or HTML.
focus Each link focusable.
active Pressed link; CSS :active.
disabled n/a — Not defined.
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. 11 of 35 fields changed on the second read — open any “corrected” note to see what it said before.