How to build an accessible Header in React
role="banner" marks the page header landmark; the active link is marked aria-current="page", and links/actions are real focusable controls so keyboard users can navigate the bar
When to use a Header
- Providing a simple marketing or app top bar with brand, links, and actions
- Anchoring primary navigation across pages of a site
- Keeping the bar visible while scrolling (sticky)
When not to use it
- Dense console apps with dropdown nav, global icon actions, and a hamburger — use ShellHeader
- Section headings within page content — use Heading
Keyboard interactions
Role banner, verified at WCAG 2.2-AA.
Tab
Common mistakes
Avoid: Building complex multi-menu console chrome on top of Header
Prefer: <ShellHeader> for console-grade navigation
Header is intentionally simple; console patterns belong to ShellHeader which provides them natively
Example
<Header brand="cascivo" links={[{ label: 'Docs', href: '/docs' }]} />