How to build an accessible Switcher in React

role="list" structures the entries; each switch target is a real link with the active destination marked, so keyboard and screen-reader users can identify and reach the current app

When to use a Switcher

• 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 it

• 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)

Keyboard interactions

Role list, verified at WCAG 2.2-AA.

• Tab
• Enter

Common mistakes

Avoid: Using Switcher as the main page navigation

Prefer: <SideNav> for primary navigation; Switcher only for app/product switching

Switcher models cross-app jumps, not navigation within the current app

Example

<Switcher
  items={[
    { label: 'Console', href: '/console', active: true },
    { label: 'Billing', href: '/billing' },
    { divider: true },
    { label: 'Docs', href: 'https://docs.example.com' },
  ]}
/>

See the full Switcher reference →