Skip to contentSkip to navigationSkip to topbar
Figma
Star

Product Switcher

A Product Switcher is an opinionated Menu that presents a list of Twilio products that a user has access to and can switch between.

Version 3.0.2
Github
Component preview theme
const ProductSwitcherMenu = () => {
const productSwitcher = useProductSwitcherState();
const [product, setProduct] = React.useState('twilio');
return (
<>
<ProductSwitcherButton {...productSwitcher} i18nButtonLabel="Switch products" />
<ProductSwitcher {...productSwitcher} aria-label="Available products">
<ProductSwitcherItem
{...productSwitcher}
name="product"
value="twilio"
checked={product === 'twilio'}
onChange={(e) => {
setProduct('twilio');
}}
productName="Twilio"
productStrapline="SMS, Voice & Video"
productIcon={<LogoTwilioIcon decorative />}
/>
<ProductSwitcherItem
{...productSwitcher}
name="product"
value="segment"
checked={product === 'segment'}
onChange={(e) => {
setProduct('segment');
}}
productName="Segment"
productStrapline="Customer data platform"
productIcon={<ProductSegmentIcon decorative />}
/>
<ProductSwitcherItem
{...productSwitcher}
name="product"
value="flex"
checked={product === 'flex'}
onChange={(e) => {
setProduct('flex');
}}
productName="Flex"
productStrapline="Cloud-based contact center"
productIcon={<ProductFlexIcon decorative />}
/>
<ProductSwitcherItem
{...productSwitcher}
name="product"
value="sendgrid"
checked={product === 'sendgrid'}
onChange={(e) => {
setProduct('sendgrid');
}}
productName="SendGrid"
productStrapline="Email delivery and API"
productIcon={<ProductEmailAPIIcon decorative />}
/>
<ProductSwitcherItem
{...productSwitcher}
name="product"
value="admin"
checked={product === 'admin'}
onChange={(e) => {
setProduct('admin');
}}
productName="Console Admin"
productStrapline="Admin center"
productIcon={<LogoTwilioIcon decorative />}
/>
</ProductSwitcher>
</>
);
};
render(
<ProductSwitcherMenu />
)

Guidelines

Guidelines page anchor

Product Switcher is an implementation of Menu that shows the Twilio products a user has access to and can switch between.

It's a mechanism to jump between top-level Twilio product applications such as Twilio Console, Segment, SendGrid, and Flex. It is ideally placed in the application Topbar.

Accessibility

Accessibility page anchor

The Product Switcher implements a Menu and supports all the same keyboard navigation that the Menu component does.


The Product Switcher is made up of the following sub-components:

  • ProductSwitcherButton
  • ProductSwitcher
  • ProductSwitcherItem
  • useProductSwitcherState

Product Switcher Button is a composed icon-only Menu Button.

Container for Product Switcher menu items.

A radio menu item that can either perform an action or navigate to a new url. It can show the currently selected product the user is in. Only one product can be selected at a time via the checked property. Ensure that the Items all belong to the same group by sharing a name.

useProductSwitcherState hook

useProductSwitcherState hook page anchor

React Hook used to initialise the Product Switcher with various options. It returns state and actions that can be taken on the Product Switcher.