SiteHeader

Production site header with logo, primary nav, language switcher, theme toggle, an optional account avatar menu, the mobile drawer and a phone-only subnav portal slot.

Status: stable. Group: navigation. Markdown version: /design-system/components/site-header.md

When to use

Production site header with logo, primary nav, language switcher, theme toggle, an optional account avatar menu, the mobile drawer and a phone-only subnav portal slot.

When not to use

Do not swap the header's IconButtons to a filled variant. The theme and menu controls use variant="tertiary" to stay transparent at scroll-top; a filled variant would defeat the layered surface treatment.
Do not nest a <header> inside SiteHeader. Multiple banner landmarks confuse AT users.
Do not hard-code the language list. The languages array is the single source of truth (EN, FI and SV ship); a new language needs an entry with its code, langXX label key, native name and languageName.xx key.

Look-alikes

BlogNav: Do not use BlogNav as site-wide navigation; use SiteHeader or NavLink instead.
ProjectNav: Do not use for site-wide navigation (that is SiteHeader)
SiteTree: Do not use as the primary site header navigation; use NavMenuList / SiteHeader instead.

Props

SiteHeader props
Prop	Type	Default	Description	Required
`navItems`	`NavItem[]`	none	Navigation items (href, label, exact); the site default when unset.	No
`className`	`string`	none	Optional wrapper class.	No
`languageCodes`	`readonly string[]`	none	Limits the language switchers to these codes, for an area offered in fewer languages than the site (the client intake: EN and FI). All site languages when unset.	No
`account`	`SiteHeaderAccount`	none	The signed-in person in an account area (the client intake): an avatar with their initials that opens a menu of account actions such as signing out. Nothing renders when unset.	No

Variants

No variant dimensions and no props with a fixed set of values.

Invalid combinations

The contract records no invalid combinations.

Keyboard

SiteHeader keyboard behaviour
Key	Behaviour
Tab	Moves focus to the control and on to the next focusable element. (standard)
Enter	Activates the focused control. (standard)
Escape	Closes or dismisses the open layer. (standard)

Rows marked (standard) name a key the contract lists without a description; the behaviour shown is the usual one for that key.

Rules

Every item under When not to use is a MUST NOT. MUST and SHOULD follow RFC 2119.

SiteHeader rules
Level	Rule	How it is checked
MUST	ARIA: Nav landmark.	Not yet verified: no evidence record. WCAG 4.1.2.
MUST	ARIA: Mobile menu keyboard trap when open.	Not yet verified: no evidence record. WCAG 4.1.2.
MUST	Required stories produce no axe violations at the configured severity.	Automated by `npm run test:stories:matrix:ci`. WCAG 2.5.8.
MUST	The accessibility tree (role, name, state) matches the committed snapshot for every required story.	Automated by `npm run test:stories:matrix:ci`. WCAG 1.3.1, 4.1.2.
MUST	The component remains legible and operable under a real browser forced-colors: active pass.	Automated by `npm run test:stories:hc`.
MUST	Every documented keyboard interaction works as specified.	Not yet verified: no evidence record. WCAG 2.1.1, 2.1.2.
MUST	A human completed an end-to-end accessibility review of this component.	Manual review, last on 2026-11-04.

Install and import

In-repo only. SiteHeader is not exported from @digitaltableteur/react, so there is no public import path.