Documentation Index
Fetch the complete documentation index at: https://mintlify.com/Twilio-labs/paste/llms.txt
Use this file to discover all available pages before exploring further.
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
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>
</>
);
};
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
