HeaderPanel
Non-modal panel anchored below the shell header at the inline-end edge — hosts notifications, app switcher, user settings
Category: navigation · WCAG 2.2-AA · navigation, panel, shell, console, overlay, notifications
States
- open
- closed
Props
| Prop | Type | Default | Description |
|---|---|---|---|
open | boolean | — | Controlled open state |
onClose | () => void | — | Called on close button click or light-dismiss |
label | string | — | Accessible label for the region (shown as header title) |
children | ReactNode | — | Content rendered inside the component. |
labels | HeaderPanelLabels | — | i18n overrides |
className | string | — | Additional CSS class names merged onto the root element. |
Design tokens
--cascivo-shell-header-block-size--cascivo-shell-panel-inline-size--cascivo-color-surface--cascivo-color-border--cascivo-shadow-md--cascivo-motion-enter
When to use
- Hosting a non-modal panel anchored under the shell header (notifications, switcher, settings)
- Showing supplementary content triggered by a ShellHeader icon action
- Light-dismiss content that should not block the rest of the app
When not to use
- Content that must block interaction until resolved — use Modal
- A small contextual menu attached to a trigger — use Dropdown or Popover
How to build an accessible HeaderPanel in React →
Examples
Notification panel
Pair with a ShellHeader action: action active=open, onAction toggles open
<HeaderPanel open={open} onClose={() => setOpen(false)} label="Notifications">
<p>3 unread messages</p>
</HeaderPanel>Related components
- ShellHeader — Opened by a ShellHeader action whose active state mirrors the panel open state
- Switcher — A Switcher commonly lives inside a HeaderPanel