How to build an accessible ShellHeader in React

role="banner" landmarks the header; nav dropdowns expose aria-expanded, icon actions use aria-pressed, the hamburger reports aria-expanded, and a skip-to-content link lets keyboard users bypass the chrome

When to use a ShellHeader

• Building console/admin app chrome with brand, dropdown nav, and global icon actions
• Providing a hamburger that toggles a SideNav and a skip-to-content link
• Hosting global controls (notifications, switcher, user menu) in one top bar

When not to use it

• A simple marketing or app top bar — use Header
• In-page section headings — use Heading

Keyboard interactions

Role banner, verified at WCAG 2.2-AA.

• Tab
• Enter
• Space
• ArrowDown
• ArrowUp
• Escape

Common mistakes

Avoid: Reaching for ShellHeader on a basic landing page

Prefer: <Header> for simple top bars

ShellHeader carries console machinery (dropdowns, icon actions, hamburger) that is overkill for simple sites

Example

import { Bell } from '@cascivo/icons'

<ShellHeader
  brand={{ prefix: 'cascivo', name: 'Console', href: '/' }}
  nav={[
    { label: 'Dashboard', href: '/dash', active: true },
    { label: 'Manage', items: [{ label: 'Users', href: '/users' }] },
  ]}
  actions={[{ id: 'notifications', label: 'Notifications', icon: <Bell /> }]}
/>

See the full ShellHeader reference →