Intro

The icon tab bar is a navigation and filtering control that contains a set of tabs, each of which can display an icon, text, or both and link to a different content area or view.

There are two key use cases:

To let users navigate between different sections of content on the screen.
To let users filter lists, with the option to display all items or only those matching a specific attribute.

In both cases, users switch between tab pages by clicking the respective tab.

Icon tab bar

When to Use

Use the icon tab bar if:

Your business objects need to show multiple facets at the same time.
You want to allow the user to browse through these facets.
You need a prominent or very visual filter on top of a list.
You have clear-cut process steps that need to be visualized.

Don't

Don’t use the icon tab bar if:

You plan to use only one single tab.
You want to display tabs in a responsive table or grid layout. Use the table toolbar instead.
You need to display hierarchical navigation. Use a tree or breadcrumb component instead.
You want to navigate to unrelated pages. Use links or navigation components instead.

Anatomy

Tab Bar

Main bar: Contains the tabs, tab separators, and the overflow menu.
Tabs: Represent navigation items that reveal corresponding content when selected.
Overflow menu: Contains any remaining tabs that can’t be displayed in the available space.
Content area: Displays the content associated with the currently selected tab.

Tab bar anatomy

Tab

Icon: Icon for the tab.
Additional text: Displays supplementary information for a tab, such as a count. It can appear above the label or next to it in parentheses.
Text: Text for the tab.
Subtabs: A tab can contain subtabs. For details, see Hierarchies.

Tab anatomy

Types

The horizontal layout of the icon tab bar never changes. The tabs always appear side by side. However, there are several types of tab bar to choose from: text only, icon tabs, tabs as filters, tabs as process steps, and semantic tabs. Each type offers different ways to present and navigate information on the screen. The choice of type depends on whether you want to guide users through a process, filter content, or simply switch between different content areas.

Text Only

The text-only variant is one of the most common types. It allows longer labels, and can also display counters next to the text to indicate the number of items on the tab page.

Unlike all other tab variants, the labels do not get truncated. The full text is always shown. As a result, you need to ensure that your labels do not become too long. They should still be easy to read on smaller screens.

If you use text-only tabs, make sure that the UpperCase property is disabled and that you enter the labels in title case (for example: Approval Flow).

Icon tab bar – text-only tabs (left) and text-only tabs with counters shown inline in parentheses (right)

hint

If counters are used, set the property HeaderMode to “Inline” so the counters appear in brackets after the labels.
Do not use the old layout that shows the counters on top of the labels (HeaderMode = “Standard”).

Icon Tabs

Icon tabs are also common tab types. These round tabs can be populated with any icon from the SAP icon font.

Labels are optional. If you decide to use labels, use them for all tabs. You can use counters as needed.

Icon tab bar – icon-only tabs (left) and icon-only tabs with counters shown above the icons (right)

guideline

Please note that starting with SAPUI5 version 1.40, you should only use the horizontal type of label (icon and label side by side).
If your labels get truncated, consider using shorter labels or text tabs (without icons), since text tabs cannot get truncated.

Tabs as Filters

If you build the tab bar as a filter, it can comprise two parts: an optional “all” tab on the left that shows the total number of items and describes the type of item (for example, 123 Products), and tabs for specific filters in which the tab text specifies the filter type (for example, laptops, monitors, printers, accessories).

Icon tab bar starting with a filter for all items with a counter followed by icon tabs with labels and counters displayed in the top right corner

Tabs as Process Steps

You can also use the tab bar to depict a process. In this case, each tab stands for one step.

To connect the process steps, you can use the triple-chevron icon (:icon-process ) from the [internal_only]SAP icon font[/internal_only][external_only]SAP icon font[/external_only] (technical name: process). Do not use the triple-chevron icon in the anchor bar of an object page.

If the process steps have a fixed order, set the property TabsOverflowMode to “StartAndEnd” to show an overflow menu on both sides and to keep the order of the tabs intact.

Icon tab bar used for process steps from Ordered to Paid, with tabs containing an icon and a count.

hint

When using icons with labels, add a comment in the properties file to make editors and translators aware that space is limited.
Example: Label for icon tab on detail screen. Max 14-16 characters (depending on character width).

Test whether your labels and their translations are displayed in full, and do not get truncated.

Semantic Tabs

You can apply semantic colors to tabs to alert users or provide visual guidance. Colors indicate different states: neutral (blue), positive (green), critical (orange), or negative (red).

Icon tab bar with semantic colors applied: Neutral (blue) and negative (red) on the left, and neutral (blue), critical (orange) and positive (green) on the right.

guideline

Only use semantic colors if it is important for users to know that they need to take action (for example, to indicate errors or critical situations requiring action). Otherwise, use the neutral default colors. For more information, see How to Use Semantic Colors.
To comply with the two-senses accessibility principle, display semantic icons on all semantic tabs. In addition, use tab text that reflects the semantic meaning.
To apply semantic colors to the icons and the text-only tabs, you can use the property sap.ui.core.IconColor.

Hierarchies

The tab bar supports hierarchies, allowing multiple tabs underneath one main tab. This way, you can group several tabs together, with the main tab acting as a headline.

You can illustrate a simple hierarchy using subtabs, which have no specific order other than their sequence, or present deeper hierarchies by nesting tabs with indentations to indicate the level of each tab.

Icon tab bar with subtabs on the left, and nested tabs on the right

hint

By default, the property maxNestingLevel is “0” (zero). To enable nesting, adjust this value to the highest level of nesting that your app allows.

Behavior and Interaction

Clicking a Tab

To navigate through the views, the user clicks the tabs.

Optional behavior: If the user clicks a tab that is already open, the container collapses. It opens again when the user clicks any tab.

hint

Use the expandable property to specify whether users can collapse the tab container (default = “true”):

Let users collapse the container if there is additional content below the container, and the information inside the container is not always needed.
If there is no content below the tab container, set the expandable property to “false”.

The expandable property controls the initial state of the container. Do not change the default state (“true”).

Changing the Order of Tabs

You can allow users to rearrange the tab order in a desktop environment (property: enableTabReordering). If this feature is enabled, users can drag and drop tabs to reorder them, either directly on the tab bar or inside the overflow menu.

It is also possible to drag and drop tabs from the tab bar to the overflow menu and vice versa.

If nesting is enabled (property maxNestingLevel > 0), users can choose the level at which they want to drop a tab. Dragging a tab activates a visual indicator for positioning the tab. For example, when a tab is dragged over another, it will be nested as a child of the highlighted tab. If the user drags a tab between two other tabs, the indicator shows the level at which level the tab will be nested.

Reordering the tabs: dragging a tab activates visual indicators that let users choose the drop position – to nest the tab as a child of another (left), or to place it at the same level between existing tabs (right).

guideline

Do not use this feature for:

Tabs as process steps: This ensures that consecutive steps do not get mixed up.
Anchor bar navigation: Sections that are represented in the anchor bar have a fixed order.

Responsiveness

The icon tab bar stretches horizontally, which often exceeds the available width on small screens. It responds to limited space by offering a scrolling mechanism.

Overflow

If there isn’t enough space to show all the tabs on the main bar, an overflow menu appears automatically, containing all the remaining tabs. In addition to the responsive overflow behavior, the icon tab bar can be forced into compact mode or even react dynamically to the application’s global density setting. See the Tab Density section for details.

Icon tab bar overflow

You can set the overflow mode, depending on your use case:

End (default): The overflow only appears at the end of the tab bar. Use this mode if the order of the tabs isn’t relevant.
Start and End: The overflow menu can appear dynamically either on one or on both sides of the tab bar. Where the overflow appears depends on which tab is activated. Use this mode if the tabs need to stay in the same order.

You can also replace the buttons for the overflow menus with custom buttons.

Icon tab bar overflow Start and End

hint

For processes with a fixed order or in the anchor bar of an object page, display an overflow menu on both sides (property: TabsOverflowMode, value: StartAndEnd).
For tabs that can be rearranged, display only one overflow menu on the far right (property: TabsOverflowMode, value: End).

Tab Density

The default responsive design of the icon tab bar applies to both compact and cozy modes. However, in addition to this responsive behavior, the control can be forced into a compact mode, or even react dynamically to the application’s global density setting. This feature can be used to:

Save vertical space on the page (applies to both text and icon tabs)
Save horizontal space (icon tabs only; this is especially helpful when there are many tabs)
Generally use less space on mobile devices
Reduce noise when there are already more important visual elements on the screen (primarily icon tabs)

The property for the override is called tabDensityMode, which can be set to “Cozy”, “Compact”, or “Inherit”. “Cozy” is the default setting that renders the control in its regular dimensions. “Compact” reduces the control’s height and icon sizes (if applicable), even if there would be enough space for the cozy design. “Inherit” instructs the control to follow the global density mode defined for the application. For backward compatibility, the default setting is “Cozy”.

The following image shows some types of tabs with their default style (cozy, left) and the reduced density mode (compact, right).

Tab density in cozy (left) and compact mode (right)

Badge

A tab can have an attention badge to indicate that new items were added to that tab. Only display a badge if new items are triggered from outside the app. Do not display a badge when users add new items themselves.

Tab with an attention badge

Badge in Default or Value State

You can add a badge to all types of icon tab bar. The badge inherits the state of its tab (default state or value state):

For the default tab state, the default red badge is displayed.
If the tab has a semantic state, the badge inherits the semantic color for the current state.

Don’t mix tabs in the default state with tabs that have a semantic state.

A badge on the chevron icon indicates that a tab within the overflow menu has received new items. The tab in question is indicated by a second badge on the item in the overflow menu.

Semantic tab with a badge and a badge within the overflow menu

Badge Interaction

The badge becomes part of the tab. When the user selects a tab with a badge, the badge disappears. If a new item is added to the tab that is currently open, no badge is shown.

In addition, the badge inherits the interaction of its tab. For example, if a tab is moved using drag and drop, the attention badge moves with it.

Selecting a tab with a badge

Guidelines

Apply the styles as follows:

Icons only: Use this option if you have only 4-5 tabs that can be very clearly identified by their icon. If a short description is needed, use icons and labels.
Text only: Use this option if you have more than 4-5 tabs, or if there are no clear icons to represent the content. The text-only style also allows for longer labels. Set the property HeaderMode to “Inline”.

If you use icon tabs, ensure the following:

Use icons that clearly represent the tab content.
Each tab must have a unique, easily distinguishable icon.
Separator or connector icons must look visually different from tab icons.
Apply labels consistently: either all tabs have them or none.

Implement the focus as follows:

By default, the first tab opens. Technically you can override this, but it’s not recommended.
Optionally, reopen the last tab selected by the user.

Additional guidelines:

Don’t show a loading indicator above a tab while item counts are loading.
Empty tabs:
- Hide tabs with no content if users can’t add anything.
- Show empty tabs only if they allow content creation (for example, notes or attachments).
Use the tab bar only for switching tabs. Don’t create cross-navigation (for example, clicking an item in tab A to open tab B), as it confuses users and breaks back navigation.

Localization

In left-to-right (LTR) layouts, the tabs in the icon tab bar are arranged in their natural order with the “More” overflow menu positioned on the right. When the application is localized for right-to-left (RTL) languages, the order of the tabs is reversed to match the reading direction, and the “More” menu moves to the left, so it remains at the end of the tab sequence. Visual indicators, such as the selection highlight, adapt to the new orientation.