Switcher
Always-visible app/product switcher LIST — every entry is rendered at once, it does not collapse. Lives inside HeaderPanel; renders links with an active indicator and optional dividers. For a collapsed trigger with a menu, use Dropdown.
Category: navigation · WCAG 2.2-AA · navigation, switcher, shell, console, app-switcher
States
- default
Props
| Prop | Type | Default | Description |
|---|---|---|---|
items | SwitcherEntry[] | — | SwitcherLink ({ label, href, active?, icon? }) or divider ({ divider: true }) |
ariaLabel | string | — | Alias of `label` — the same invisible accessible name under the catalog spelling. Neither is deprecated. |
label | string | Switch application | Accessible name for the switcher list. Not rendered — screen readers only. |
className | string | — | Additional CSS class names merged onto the root element. |
Design tokens
--cascivo-color-text--cascivo-color-bg-subtle--cascivo-color-accent--cascivo-color-accent-subtle--cascivo-color-border--cascivo-focus-ring
When to use
- Listing sibling apps/products the user can switch between
- Rendering switch destinations inside a HeaderPanel opened from the shell header
- Grouping switch targets with dividers and marking the active one
When not to use
- Primary in-app navigation — use SideNav
- A small action menu attached to a control — use Dropdown
- A COLLAPSED workspace/team switcher with one visible row and a menu on click — use Dropdown. Switcher renders every entry, permanently: it is an always-visible list, not a collapsing control, and the name misleads (2026-08-21 report item 5)
How to build an accessible Switcher in React →
Examples
App switcher
Place inside a HeaderPanel opened by a Grid action in ShellHeader
<Switcher
items={[
{ label: 'Console', href: '/console', active: true },
{ label: 'Billing', href: '/billing' },
{ divider: true },
{ label: 'Docs', href: 'https://docs.example.com' },
]}
/>Related components
- HeaderPanel — Switcher is placed inside a HeaderPanel opened by a ShellHeader action