Switcher
App/product switcher list — lives inside HeaderPanel, renders links with active indicator and optional dividers
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 }) |
label | string | Switch application | Text label for the control. |
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
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