Skip to main content

​
About Product Switcher

Product Switcher is a menu component that enables users to navigate between different products, applications, or modules. Built on the Menu component, it provides a consistent way to switch contexts within a larger platform.

​
Components

  • ProductSwitcher - Main menu container
  • ProductSwitcherItem - Individual product option
  • ProductSwitcherButton - Button to trigger the menu
  • useProductSwitcherState - Hook for menu state management

​
Installation

yarn add @twilio-paste/product-switcher

​
Usage

import {
  ProductSwitcher,
  ProductSwitcherItem,
  ProductSwitcherButton,
  useProductSwitcherState
} from '@twilio-paste/product-switcher';

const MyProductSwitcher = () => {
  const menu = useProductSwitcherState();
  
  return (
    <>
      <ProductSwitcherButton {...menu}>
        Products
      </ProductSwitcherButton>
      <ProductSwitcher {...menu} aria-label="Product switcher">
        <ProductSwitcherItem href="/messaging">
          Messaging
        </ProductSwitcherItem>
        <ProductSwitcherItem href="/voice">
          Voice
        </ProductSwitcherItem>
        <ProductSwitcherItem href="/video">
          Video
        </ProductSwitcherItem>
        <ProductSwitcherItem href="/analytics">
          Analytics
        </ProductSwitcherItem>
      </ProductSwitcher>
    </>
  );
};

​
Props

​
ProductSwitcher

Accepts all Menu props for state management.

​
ProductSwitcherItem

​
ProductSwitcherButton

​
State Management

Use useProductSwitcherState hook to manage menu state: 
const menu = useProductSwitcherState();

// Pass state to both button and menu
<ProductSwitcherButton {...menu}>Products</ProductSwitcherButton>
<ProductSwitcher {...menu}>
  {/* items */}
</ProductSwitcher>

​
With Icons

Add icons to product items for visual identification: 
import { MessageIcon, PhoneIcon, VideoOnIcon } from '@twilio-paste/icons/esm';

<ProductSwitcher {...menu}>
  <ProductSwitcherItem href="/messaging">
    <MessageIcon decorative />
    Messaging
  </ProductSwitcherItem>
  <ProductSwitcherItem href="/voice">
    <PhoneIcon decorative />
    Voice
  </ProductSwitcherItem>
  <ProductSwitcherItem href="/video">
    <VideoOnIcon decorative />
    Video
  </ProductSwitcherItem>
</ProductSwitcher>

​
Navigation Patterns

​
Link-based Navigation

Use href for standard navigation: 
<ProductSwitcherItem href="/messaging">
  Messaging
</ProductSwitcherItem>

​
Client-side Routing

Use onClick with router libraries: 
import { useRouter } from 'next/router';

const router = useRouter();

<ProductSwitcherItem onClick={() => router.push('/messaging')}>
  Messaging
</ProductSwitcherItem>

​
Accessibility

  • Uses semantic menu markup with ARIA attributes
  • Keyboard navigation with arrow keys
  • Focus management on open/close
  • Menu state announced to screen readers
  • Supports keyboard activation (Enter/Space)

​
Topbar Integration

Product Switcher is commonly used in the Topbar: 
import { Topbar } from '@twilio-paste/topbar';

<Topbar id="topbar">
  <ProductSwitcher {...menu} aria-label="Product switcher">
    {/* products */}
  </ProductSwitcher>
  {/* other topbar content */}
</Topbar>

​
Related components

Build docs developers (and LLMs) love

Get started for freeTalk to us