Components/Product Switch

The Product Switch, also known as App Launcher, provides users with role-based access to several products or lines of businesses (LoBs). The product switch displays an icon button that triggers a **Popover** with the products or LoBs. Because it is designed to be as simple as possible, the product switch only has one level of navigation.

**Use the Product Switch (App Launcher) if:** - You want to give your users access to several different products or LoBs within the same UI. **Do not use the Product Switch (App Launcher) if:** - You want your users to navigate within the current product. In this case, use a Product Menu (see **Shellbar**). **Use the Product Switch (App Launcher) if:** - You want to give your users access to several different products or LoBs within the same UI. - You want your users to navigate within the current product. In this case, use a Product Menu (see **Shellbar**).

Product switch is displayed with a maximum of 4 columns on large desktop screens. The body grows to accommodate up to 4 rows of items (max-height: 33rem / 528px). Once that limit is reached, additional items are accessible via vertical scroll.

If there are 6 (or less) items to display, it is recommended to use the 3-column layout (medium). To display a medium-sized product switch, add the \

When fewer than 3 items are provided, use the 2-column layout to hug the content width. Add the \

For smaller screens (mobile), the product switch is displayed in list format. To achieve this style, add the \