Skip to contentSkip to navigationSkip to topbar
Paste assistant Assistant
Figma
Star

Product Switcher

Version 4.0.1GithubStorybook

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

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.

OSZAR »