ShellHeader
Console application header: brand with prefix, dropdown nav menus, global icon actions, hamburger, skip-to-content
Category: navigation · WCAG 2.2-AA · navigation, header, shell, console, menu, app-shell
States
- default
Props
| Prop | Type | Default | Description |
|---|---|---|---|
brand | ShellHeaderBrand | ReactNode | — | Brand: { prefix?, name, href? } or free-form node |
nav | ShellHeaderNavItem[] | — | Top nav: links ({ label, href, active?, onClick? }) or dropdown menus ({ label, items }) |
actions | ShellHeaderAction[] | — | Right-aligned global icon actions with aria-pressed |
end | ReactNode | — | Free-form trailing slot (user menu, theme switcher) |
onMenuClick | () => void | — | Renders the hamburger button; call shell.toggleSideNav |
menuExpanded | boolean | — | aria-expanded for the hamburger button |
skipToContentHref | string | false | '#cascade-main' | Skip-link target; false disables the link |
labels | ShellHeaderLabels | — | i18n overrides for built-in strings |
Design tokens
--cascivo-shell-header-block-size--cascivo-color-surface--cascivo-color-border--cascivo-color-text--cascivo-color-text-subtle--cascivo-color-accent--cascivo-radius-control
When to use
- 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
- A simple marketing or app top bar — use Header
- In-page section headings — use Heading
How to build an accessible ShellHeader in React →
Examples
Console header
Brand with prefix, dropdown nav, global icon action
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 /> }]}
/>Related components
- SideNav — The hamburger toggles a SideNav in the app shell
- HeaderPanel — Icon actions open HeaderPanels (notifications, switcher)
- Header — Header is the simpler top bar for non-console apps