Description

Page tabs is a UI pattern for separating content into different tabs, or pages, with one tab visible at a time but consumed within the same context. Page tabs are an unassuming and compact way of presenting content.

Usage

Page tabs use Fiori’s Icon Tab bar, which supports a variety of different styles and uses additional to page tabs. When designing for page tabs, please use the or styles only.

Anatomy

1. Tab Bar

Tabs can have sub tabs with one or two click areas, and sub tab drop downs may be arranged as a flat list of menu items or with icons and indentation to show a hierarchical order and relationship. See for more information.

2. Page Tabs

Different colors backgrounds for a page tab can be achieved using the sap.m.PageBackgroundDesign enumeration, or by hard coding their values if not using UI5.

Follow the link to see API references or see Specifications at the end of this page for exact color values.

Behaviors and Interactions

Responsiveness and Tab Overflow

Page tabs should always be laid out in a single horizontal tab bar, and never occupy a second row or a second tab bar as this affects their usability. Instead, the tab bar behaves responsively according to the amount of space available in a screen.

In UI5, the tab bar automatically responds to limited space by creating an overflow menu, called for all additional tabs. Click on the overflow menu to access all hidden additional page tabs. If not using UI5, ensure this behavior is followed.

Tab scrolling and overflow menu

2
do
false
Use an overflow menu when there are more tabs that can be shown in a tab bar.
dont
false
Don't use the scrolling mechanism to navigate between hidden or extra page tabs.

Reordering Tabs

Page tabs can be rearranged by dragging and dropping them along the tab bar. When dragging is enabled, clicking and holding onto a tab will change the mouse cursor to communicate that this interaction is possible.

The drop location is represented by the blue highlight that appears in-between tabs. It is also possible to drag and drop tabs from the tab bar to the overflow menu and vice versa. To enable this interaction in UI5, ensure this property is enabled (property: enableTabReordering).

Reorder tabs by dragging and dropping

Reorder tabs inside the overflow menu

Reorder tabs from the overflow menu into the tab bar, and vice versa

Sub Tabs

Page tabs can include sub tabs as an alternative way of grouping and managing page tabs in the tab bar. There are two ways of working with sub tabs, both demoed in this example, distinguished by the number of click areas in the tab container itself.

One-Click Area

Clicking on a tab opens its sub menu simultaneously. The tab is not active until one is selected from the dropdown menu.

Use this type if your parent tab is a group title or label and has no content of its own.

Image
Image

Two Click Areas

Clicking on tab selects it as usual, but the downward arrow button acts independently and must be clicked on its own to open the dropdown menu.

Use this type when the parent tab and its sub tabs contain separate but related content.

2
do
false
Use tab with sub tabs when needed.
dont
false
Don't nest tab bars inside other tab bars.
guideline
Note: Two click area tabs have a blue arrow to suggest interaction. One click area tabs have the same color for the tab label and arrow. Both types have different rules around padding and placement of arrows. For more information, please view Specifications at the end of this page.

Best Practices

Use only one navigation pattern

Navigation between page tabs should be made exclusively by interacting with the tab bar. Don't let users click an action in tab A that takes them to tab B. This type of cross-navigation inside a page tab is confusing and cannot be handled properly by back navigation.

By default, always show the first tab as open. This is the initial setting provided by the control. Later, you can show the tab last selected by the user if desired.

2
do
false
Switch tabs by clicking and interacting with the tab bar.
dont
false
Don't use buttons, links, or other mechanisms for cross-navigating between page tabs.

Unify the experience

The benefit of using paged tabs is the opportunity to have multiple content areas share the same context. In other words, page tabs provide the user with the ability to alternate content without ever leaving their place and position.

Because of this, avoid creating tabs that feel like their own independent content areas, as it defeats the purpose of their intent. Page tabs all share the same context and should be unified in their overall experience even if their contents defer, whether it be by sharing the same global menu bars, tools, contextual side panels, and so on.

2
do
false
Unify the tab experience by taking advantage of the same tools and shared context in a space or screen.
dont
false
Don't create tabs that are too dissimilar from each other, or require special treatment from the rest of the group.

Group and label for recognition

Create tabs around logical groups of content so users can predict and anticipate what to expect when selecting a given tab. Give each tab a short and simple label in plain language, using one or two-word labels for best result. The benefit of this is:

If your content cannot be organized into clear distinct groups that can be labelled simply, then this is a good indication your content may be too complicated for a page tab system.

Avoid comparing page tabs to each other

Page tabs are not conducive to comparing items between tabs, as the back-and-forth places undue burden on short-term memory and increases cognitive load and interaction costs.

If your intention is to compare items between page tabs, then consider other options more suitable for this, such as flexible column or split screen layouts.

Maintain Tab Consistency

Design page tabs that share a common theme or make sense together. When page tabs become too different one from another, new or less-experienced users may interpret the tab system as a navigation system in the application.

All tabs should look and function in the same way. For example, dealing with empty states on a tab-by-tab basis creates an unexpected experience for each tab. A better approach would be:

Showing all tabs, even when empty, with empty state illustration for tab consistency.

Specifications

Create page tabs by using a Fiori’s Icon Tab Bar using or only. Do not use icons for page tabs.

<div> <div>Badge</div> <div>Component</div> <div>Specification</div> <div>Details</div> </div> <div> <div></div> <div></div> <div> <ul> <li><em>Standard:</em> @sapUiBaseBG</li> <li><em>List:</em> @sapUiGroupContentBackground</li> </ul> </div> <div> <ul> <li><em>Standard:</em> #F7F7F7</li> <li><em>List:</em> #FFFFFF</li> </ul> </div> </div> <div> <div></div> <div></div> <div> <p>: 100%</p> <p>2.75rem</p> <p>@sapUiObjectHeaderBackground</p> <p>@sapUiContentHeaderShadow</p> </div> <div> <p>100%</p> <p>44px</p> <p>#FFFFFF</p> <p>inner shadow: X:0, Y: -1, blur: 0, spread: 0, #D9D9D9, alpha 100</p> <p>X:0, Y:0, blur: 4, spread: 0, #000000, alpha 15</p> </div> </div> <div> <div></div> <div></div> <div> <p>S: 1rem, M: 2rem, L: 2rem, XL: 3rem</p> <p>* Margin is dynamically sized according to space available. Please refer to <a href="https%3A%2F%2Fwiki.wdf.sap.corp%2Fwiki%2Fpages%2Fviewpage.action%3FpageId%3D2038567803">Content Container Padding</a> for more information.</p> </div> <div> <p>S: 16px, M: 32px, L:32px, XL: 48px</p> <p>* Margin is dynamically sized according to space available. Please refer to <a href="https%3A%2F%2Fwiki.wdf.sap.corp%2Fwiki%2Fpages%2Fviewpage.action%3FpageId%3D2038567803">Content Container Padding</a> for more information</p> </div> </div> <div> <div></div> <div></div> <div> <p>@sapUiFontFamily</p> <p>@sapMFontMediumSize</p> <p>@sapUiSelected</p> <p>0.188rem left and right of label</p> <ul> <li><em>Width:</em> 100% of tab container</li> <li><em>Height:</em> 0.188rem</li> <li><em>Border Radius:</em> 0.125rem; 0.125rem; 0; 0;</li> </ul> <p>* Selection bar placed on bottom edge of tab container</p> <ul> <li><em>Width:</em> total of tab label + padding</li> <li><em>Height:</em> 2.75 rem</li> </ul> <p>* Tab label is vertically and horizontally centered inside tab container</p> </div> <div> <p>72</p> <p>14pt</p> <p>#0854a0</p> <p>3px left and right of label</p> <ul> <li><em>Width:</em> 100% of tab container</li> <li><em>Height:</em> 3px</li> <li><em>Border Radius:</em> 2;2;0;0;</li> </ul> <p>* Selection bar placed on bottom edge of tab container</p> <ul> <li><em>Width:</em> total of tab label + padding</li> <li><em>Height:</em> 44px</li> </ul> <p>* Tab label is vertically and horizontally centered inside tab container</p> </div> </div> <div> <div></div> <div></div> <div> <p>2rem</p> <p>2rem at minimum</p> </div> <div> <p>32px</p> <p>32px at minimum</p> </div> </div> <div> <div></div> <div></div> <div> <p>@sapUiFontFamily</p> <p>@sapMFontMediumSize</p> <ul> <li><em>Regular:</em> @sapUiContentLabelColor</li> <li><em>Hover:</em> @sapUiBaseText</li> </ul> <p>0.188rem left and right of label</p> <ul> <li><em>Width:</em> total of tab label + padding</li> <li><em>Height:</em> 2.75 rem</li> </ul> <p>* Tab label is vertically and horizontally centered inside tab container</p> </div> <div> <p>72</p> <p>14pt</p> <ul> <li><em>Regular:</em> #6A6D70</li> <li><em>Hover:</em> #32363A</li> </ul> <p>3px left and right of label</p> <ul> <li><em>Width:</em> total of tab label + padding</li> <li><em>Height:</em> 44px</li> </ul> <p>* Tab label is vertically and horizontally centered inside tab container</p> </div> </div> <div> <div></div> <div></div> <div>Follows specs of active or inactive tabs above with the addition of drop arrow as a sub tab (specifications below).</div> <div>Follows specs of active or inactive tabs above with the addition of drop arrow as a sub tab (specifications below).</div> </div>

Sub Tab – One-Click Area

<div> <div>Badge</div> <div>Component</div> <div>Specification</div> <div>Details</div> </div> <div> <div></div> <div></div> <div> <p>icon is horizontally and vertically centered inside container area:</p> <ul> <li><em>Width:</em> 1rem</li> <li><em>Height:</em> 2rem</li> </ul> <p>FPA-icons</p> <p>slim-arrow-down</p> <p>&#xe7ac</p> <p>1rem (16pt)</p> <p>matches active/inactive state of label</p> <ul> <li><em>Regular:</em> @sapUiContentLabelColor</li> <li><em>Active tab:</em> @sapUiSelected</li> </ul> </div> <div> <p>icon is horizontally and vertically centered inside container area:</p> <ul> <li><em>Width:</em> 16px</li> <li><em>Height:</em> 32px</li> </ul> <p>FPA-icons</p> <p>slim-arrow-down</p> <p>&#xe7ac</p> <p>16pt</p> <p>matches active/inactive state of label</p> <ul> <li><em>Regular:</em> #6A6D70</li> <li><em>Active tab:</em> #0854a0</li> </ul> </div> </div> <div> <div></div> <div></div> <div> <p>0.375rem</p> <p>0.5rem</p> </div> <div> <p>6px</p> <p>8px</p> </div> </div>

Sub Tab – Two-Click Area

Follows specs of active or inactive tabs with the addition of a transparent icon button modified for this use.

<div> <div>Badge</div> <div>Component</div> <div>Specification</div> <div>Details</div> </div> <div> <div></div> <div></div> <div> <p>2rem</p> <p>2.75rem</p> <p>* Button is horizontally and vertically centered inside container area.</p> </div> <div> <p>32px</p> <p>44px</p> <p>* Button is horizontally and vertically centered inside container area.</p> </div> </div> <div> <div></div> <div></div> <div> <p><a href="http%3A%2F%2Fveui5infra.dhcp.wdf.sap.corp%3A8080%2Fdemokit%2F%23%2Fentity%2Fsap.m.Button">sap.m.Button</a></p> <p>1.5rem</p> <p>1.5rem</p> <p>* Transparent button has its width and height modified for this specific use. Do not use these modifications outside of icon tab bars.</p> </div> <div> <p><a href="https%3A%2F%2Fwiki.wdf.sap.corp%2Fwiki%2Fpages%2Fviewpage.action%3FpageId%3D2025039257%23Button(Fiori3)-TertiaryTransparentHighlightButton">Tertiary Transparent Highlight Button</a></p> <p>24px</p> <p>24px</p> <p>* Transparent button has its width and height modified for this specific use. Do not use these modifications outside of icon tab bars.</p> </div> </div>

Fiori Guidelines: Icon Tab Bar

Core Visual Design Specifications wiki: Icon Tab Bar – Inline Mode (Fiori 3)

API Reference: sap.m.IconTabBar

DemoKit Sample: Icon Tab Bar

Support

If you have any questions or feedback about this page, please contact our team. For further information and questions in regards to the Design System, please visit the DNA Design SharePoint.