Components/Icon Tab Bar

The Icon Tab Bar can be used for navigation within an object, or as a filter. Each tab of the component links to a different content area or view.

**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. **Do not use the icon tab bar if:** - You plan to use only a single tab. **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. - You plan to use only a single tab.

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. The labels of the tabs 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. The control has the same look and feel in Cozy and Compact mode.

NOTE: This is no longer recommended. Counters can be shown on top of labels. In this case you need to apply the `fd-icon-tab-bar--counters` modifier class. The control has the same look and feel in Cozy and Compact mode.

The Icon tabs are rounded tabs that can be populated with any icon. The labels in this case are omitted and counters are optional. You need to apply the `fd-icon-tab-bar--icon-only` modifier class for this type of tabs.

To display Icon Tabs with labels and counters you need to apply the `fd-icon-tab-bar--icon` modifier class. The counters are optional and can be ommited. The label is always positioned at the bottom. If you decide to use labels, use them for all tabs. The badge is rendered at the top right hand corner of the icon container. Consider using shorter labels or text tabs (without icons), since text tabs cannot get truncated.

You can also use the tab bar to depict a process. In this case, each tab stands for one step. You need to add the `fd-icon-tab-bar--process` modifier class and a sibling html element with `fd-icon-tab-bar__separator` class to the tab.

The tab bar as a filter has two parts: - An “all” tab on the left - shows the total number of items, and describes the type of item (for example, 189 Products).- Tabs for specific filters - the tab text indicates the filter attribute. It is recommended to show a counter on every tab.You need to add the \

Tabs can have an overflow to either sides of the control. Depending on if the order is fixed (process steps) or can be rearranged (tabs). For processes with a fixed order, an overflow to both sides is used. For tabs that can be rearranged, only one overflow will be displayed on the right side.

When there is only one click area per tab (also including tabs with sub-items), regular tabs get selected immediately after the click is released. Tabs with sub-items trigger the expansion of a menu (Popover) showing its sub-items. The parent tab title remains displayed when its child is select.You need to apply the \

In case of two click areas for tabs with sub-tabs, the behaviour for regular tabs (without sub-items) remains unchanged, like described above the tabs get selected immediately. Tabs with two click areas behave differently: when the main part of the tab is clicked, it is highlighted and then selected immediately. Clicking the second area opens a menu (Popover) containing the sub-items. Once a sub-item is clicked, the main tab is highlighted as selected.

The Tab attention badge is applied as a visual eye-catcher to indicate a change within a Tab. The badge is a span element with \

For an Icon Tab Bar with responsive paddings that adjust based on the screen size add the `fd-icon-tab-bar--responsive-paddings` modifier class.

For an Icon Tab Bar with responsive paddings that adjust based on the screen size add the `fd-icon-tab-bar--responsive-paddings` modifier class.

The Navigation Tab Bar is the main/default navigation displayed on the SAP launchpad home page. It offers the user an easy access to multiple pages per space. The background color of the Shell Navigation is connected the Home/Shell Header to properly differentiate the global shell navigation versus any application specific navigation. The Navigation Bar snaps to top and remains visible while scrolling. It is not visible in App view. The implementation is based on UniversalIconTabBar with some different color parameters that are specific to Shell Bar. If there are more Tabs than the screen can accommodate, the remaining Tabs move into an Overflow.

The Flat Navigation offers the user an easy access to multiple pages per space. As the ShellNavigation (Fiori 3), the Flat Navigation is the main/default navigation displayed on the SAP Fiori launchpad home page. It snaps to top and remains visible while scrolling and is not visible in App view. The Flat Navigation Concept allows putting all entities of a single space directly into the first level of the Top Level Navigation Bar for direct access. Add the \

You can allow users to rearrange the tab order. 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. There're 4 classes for drag and drop: use \

For closable tabs add the \