i

Header

Navigating · researched

The top bar identifying the site or product, with navigation and utility actions.

organism · Carbon: UI shell header · also called Masthead, Top bar · contains navigation-bar, search

"UI shell header" is tied to Carbon's shell.

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

Layout.Header subset native: yes antd 6.6.5
Variants
—
Sizes
—
States documented
—
Accessibility guidance
no

Index right. Renders a header element, but it is only a structural region of Layout; it supplies no navigation or utility-action behaviour of its own. Documented on the Layout page.

docs ↗ · code ↗

Carbon

UI shell header native: yes @carbon/react 1.117.0
Variants
Header base, Header with navigation, Header with actions, Header with sidenav
Sizes
—
States documented
hover, focus, active
Accessibility guidance
yes

Header renders a header element; Header* parts (HeaderName, HeaderNavigation, HeaderGlobalBar) live in the UIShell directory.

2 corrected on re-read
  • variants: null → ["Header base","Header with navigation","Header with actions","Header with sidenav"] Header usage 'Types' table
  • 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

GOV.UK header native: no govuk-frontend 6.5.1
Variants
Default GOV.UK header, GOV.UK header with One Login
Sizes
—
States documented
default, focus
Accessibility guidance
no

Renders div-based markup with logo, optional service name and navigation; the page template (not the component) supplies the <header> element. Brand-refresh section on docs page. Index also mapped Generic header as an instance; it is a separate component for non-GOV.UK services.

3 corrected on re-read
  • builds_on_native: "partly" → "no" Macro renders div.govuk-header via govukGenericHeader; <header> element comes from page template.njk, not the component
  • variants: null → ["Default GOV.UK header","GOV.UK header with One Login"] Docs headings; fixtures add "with product name" and "full width"
  • states_documented: null → ["default","focus"] scss has :focus on header links

docs ↗ · code ↗

Material Web

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

Index missed it. Labs/gb on main only: unpublished and not in the installed 2.5.0 package, no docs page. Slots leading, trailing, title (default), subtitle, search; has a scrolled state. docs/roadmap.md still lists Top app bar as a component not yet built.

2 corrected on re-read
  • present: "ships" → "absent" labs-only: Absent as shipped: only labs/gb appbar (md-gb-app-bar; variants standard|search, sizes sm|md|lg) on main, unpublished, not in 2.5.0, no docs; roadmap
  • urls: {"docs_url":null,"code_url":"https://github.com/material-components/material-web/tree/main/labs/gb/components/appbar"} → {"docs_url":null,"code_url":null} no URLs for absent rows; repo tree API 1808 entries, not truncated

· code ↗

Primer

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

Primer React, exported from index; no primer.style page (docs.json only, status alpha, no stories). Renders a header element with Header.Item (div) and Header.Link (a) children. Legacy GitHub-style top bar.

· code ↗

Spectrum

native: unread
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
Accessibility guidance
yes

Checked the sitemap.xml and query-index.json component list, S2 exports, SWC 1st-gen/gen2 package trees and spectrum-css components for a site or product header bar: none. Index also lists none. Header in S2/v3 (Content.tsx) is a region slot inside Dialog, Card, Popover and similar (React Aria Header renders a header element), not a top bar; the nearest site-level items are Top nav (SWC 1st-gen only) and docs-site blocks.

5 corrected on re-read
  • present: "absent" → "ships" spectrum.adobe.com documents an App frame header: required, anatomy, component options, states, accessibility; design-only, no code in any repo
  • builds_on_native: null → "unread" No implementation exists in S2, v3, SWC or spectrum-css to read
  • states_documented: null → ["default"] States table for App frame header: only Default supported (nav items add hover/down/focus/disabled/selected)
  • a11y_documented: null → "yes" Page has Accessibility > Keyboard interactions about the header (Tab onto/off header, arrows between items, skip button)
  • urls: {"docs_url":null,"code_url":null} → {"docs_url":"https://spectrum.adobe.com/foundations/app-frame/header-browsing-context","code_url":null} HTTP 200; changed: docs_url

docs ↗

USWDS

Header native: yes @uswds/uswds 3.14.0
Variants
basic (usa-header--basic), extended (usa-header--extended), megamenu (usa-header--megamenu)
Sizes
—
States documented
default
Accessibility guidance
yes

Agrees with index. Site title is the separate usa-site-title package; the nav is usa-nav. Page has a Header accessibility section.

docs ↗ · code ↗

Platform facts

Native elementheaderSpec: 'a group of introductory or navigational aids'. MDN: when not nested in sectioning content or main, header has the banner landmark role; otherwise generic. Spec content model: flow content, no header or footer descendants. A design-system 'utility actions' area is not named by any source.
Baseline—
APG patternlandmarks
ARIA role—
Shipped by6 of 7 systems

Anatomy

  1. logo / site identity optional — Spec header: 'can also be used to wrap ... a search form, or any relevant logos'.
  2. heading optional — Spec: 'intended to usually contain a heading (an h1-h6 element or an hgroup element), but this is not required'.
  3. navigation optional — Spec: 'a group of introductory or navigational aids'; a nav element may be inside.
  4. search form optional — Spec header wording.

The seven states

default Static container.
hover n/a — Container is not interactive.
focus n/a — Not focusable; its links and buttons are.
active n/a — Not interactive.
disabled n/a — Not defined by APG or HTML.
error n/a — Not defined by APG or HTML.
loading n/a — Not defined by APG or HTML.

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