product-switch.md

title	id	keywords	sidebar	toc	permalink	folder
Product Switch	product-switch	product-switch, shellbar	left-navigation-sidebar	false	components/product-switch.html	components

{: .docs-intro} Product Switch provides a role based access to all products or LoBs. It shows only one level of navigation.

Product Switch in Shellbar

{% capture product-switch-body-control %}

• Home

  Central Home
• Analytics Cloud

  Analytics Cloud
• Catalog

  Ariba
• Guided Buying
• Strategic Procurement
• Travel & Expense

  Concur
• Vendor Management

  Fieldglass
• Human Capital Management
• Sales Cloud

  Sales Cloud
• Commerce Cloud

  Commerce Cloud
• Marketing Cloud

  Marketing Cloud
• Service Cloud
• Customer Data Cloud
• S/4HANA

{% endcapture %} {% include display-component.html component=product-switch-body-control %}

Product Switch - Desktop

Desktop or very large screen has a maximum of 4 columns.

{% capture product-switch-body %}

• Home

  Central Home
• Analytics Cloud

  Analytics Cloud
• Catalog

  Ariba
• Guided Buying
• Strategic Procurement
• Travel & Expense

  Concur
• Vendor Management

  Fieldglass
• Human Capital Management
• Sales Cloud

  Sales Cloud
• Commerce Cloud

  Commerce Cloud
• Marketing Cloud

  Marketing Cloud
• Service Cloud
• Customer Data Cloud
• S/4HANA

{% endcapture %} {% include display-component.html component=product-switch-body %}

Product Switch - 3-column layout

Use the 3 column layout when the Product Switch has up to 6 items. Add the modifier class fd-product-switch__body--col-3 for 3 column layout.

{% capture product-switch-body-3col %}

• Home

  Central Home
• Analytics Cloud

  Analytics Cloud
• Catalog

  Ariba
• Guided Buying
• Strategic Procurement

{% endcapture %} {% include display-component.html component=product-switch-body-3col %}

Product Switch - Smallest Screen

For narrow screens the Product Switch transforms to a List. Add the modifier class fd-product-switch__body--mobile for a list layout.

{% capture product-switch-body-mobile %}

• Home

  Central Home
• Analytics Cloud

  Analytics Cloud
• Catalog

  Ariba
• Guided Buying
• Strategic Procurement
• Travel & Expense

  Concur
• Vendor Management

  Fieldglass
• Human Capital Management
• Sales Cloud

  Sales Cloud
• Commerce Cloud

  Commerce Cloud
• Marketing Cloud

  Marketing Cloud
• Service Cloud
• Customer Data Cloud
• S/4HANA

{% endcapture %} {% include display-component.html component=product-switch-body-mobile %}

Product Switch - Smallest Screen, RTL

{% capture product-switch-body-mobile %}

• Home

  Central Home
• Analytics Cloud

  Analytics Cloud
• Catalog

  Ariba
• Guided Buying
• Strategic Procurement
• Travel & Expense

  Concur
• Vendor Management

  Fieldglass
• Human Capital Management
• Sales Cloud

  Sales Cloud
• Commerce Cloud

  Commerce Cloud
• Marketing Cloud

  Marketing Cloud
• Service Cloud
• Customer Data Cloud
• S/4HANA

{% endcapture %} {% include display-component.html component=product-switch-body-mobile %}