Product Switcher - Bellhop Design System

When to use

Use product switchers in multi-product ecosystems to help users move between related applications.

Suite Navigation

Navigate between different products in an integrated software suite or platform.

Cross-Product Features

Provide quick access to related tools and applications within the same ecosystem.

Unified Experience

Maintain consistent navigation across multiple products in a branded family.

Product Discovery

Help users discover and access other products they have permissions to use.

When not to use

For navigation within a single product—use sidebar or tabs
When there's only one product—component adds unnecessary complexity
For switching between accounts or workspaces—use account/workspace switcher
In mobile contexts with limited space—consider a simpler dropdown

Anatomy

Product switchers consist of a trigger button and a menu displaying available products.

Trigger Button
Icon or waffle menu that opens the product menu
Menu Container
Popup panel displaying available products
Product Items
List of products with icons, names, and descriptions
Current Indicator
Visual marker showing the currently active product

Types

Product switchers can display products in various layouts and groupings.

Grid Layout

Products displayed in a grid with icons and labels for easy scanning.

With Descriptions

Product items include brief descriptions for additional context.

Interaction

Product switchers open on click and navigate to selected products.

Menu Opening

Click the trigger to display the product menu overlay.

Product Selection

Click a product to navigate to that application or section.

Keyboard Navigation

Use arrow keys to navigate products and Enter to select.

Current Product

Active product is visually highlighted in the menu.

Placement

Product switchers are typically placed in the global navigation header.

Header Left

Place in the top-left corner near the logo for easy access.

Header Right

Position with other global utilities in the top-right area.

Sidebar Top

Include at the top of a sidebar for persistent access.

Consistent Position

Maintain the same position across all products for familiarity.

Accessibility

Product switchers are designed to be fully accessible with keyboard support.

Keyboard Support

Tab: Focus on trigger button
Enter/Space: Open product menu
Arrow Keys: Navigate between products
Enter: Select focused product
Escape: Close menu without selection

ARIA Attributes

aria-haspopup="menu": Indicates trigger opens menu
aria-expanded: Communicates menu open/closed state
role="menu": Identifies product menu
role="menuitem": Marks each product option

Screen Reader Support

Trigger button has descriptive label
Product names are announced clearly
Current product status is communicated
Menu structure is properly conveyed

Focus Management

Focus moves to menu when opened
Focus returns to trigger when closed
Clear focus indicators on all items
Focus cycles within menu bounds

Related Components

Components that provide similar or complementary functionality.

Component	Usage
Button	Often used together for triggering actions and interactions.
Modal	Consider for more complex interactions requiring user focus.
Card	Use for grouping and organizing related content.
Dropdown	Alternative for presenting options in a compact space.

Resources

Design and development resources for the Product Switcher component.

Figma

Available

View in Figma →

Web Components/Angular

Available

View in Storybook →

React

Available

View in Storybook →