Skip to main content

ProductSwitch

<ui5-product-switch> | Since 1.0.0-rc.5

The ui5-product-switch is an SAP Fiori specific web component that is used in ui5-shellbar and allows the user to easily switch between products.

Keyboard Handling​

The ui5-product-switch provides advanced keyboard handling. When focused, the user can use the following keyboard shortcuts in order to perform a navigation:

  • [Tab] - Move focus to the next interactive element after the ui5-product-switch
  • [Up] or [Down] - Navigates up and down the items
  • [Left] or [Right] - Navigates left and right the items

ES6 Module Import​

import "@ui5/webcomponents-fiori/dist/ProductSwitch.js";

import "@ui5/webcomponents-fiori/dist/ProductSwitchItem.js"; (for ui5-product-switch-item)

Basic Sample​

Properties​

No properties available for this component.

Slots​

default​

DescriptionDefines the items of the ui5-product-switch.
TypeArray<IProductSwitchItem>

Events​

No events available for this component.

Methods​

No methods available for this component.

CSS Parts​

No CSS parts available for this component.

More Samples​

ProductSwitch in ShellBar​

Press the "grid" on the right-most part of the ShellBar to show the ProductSwitch.