The tool header is a horizontal container at the top of the app. It takes the full width of the screen, floats above the content, and does not scroll. It acts as a container for global elements such as an app menu strip, a horizontal navigation, name and branding of the app, and utility functions. The main container may hold further containers that have their own overflow mechanisms, such as a menu container or horizontal navigation that reacts responsively to the viewport width.
Use the tool header if:
- Your app’s target group is somewhat or purely technical in nature, and the app’s main use cases are in development, administration, or configuration.
- The app uses other technical components, such as side navigation or one of the more technical layouts.
- The app uses an app menu.
- The app uses a horizontal navigation.
- The app is launched without the SAP Fiori launchpad.
Do not use the tool header if:
- Your scenarios are not in the tooling or administration space.
- Your app’s target group are non-technical users.
Responsiveness and Adaptiveness
In general, the tool header adjusts to different screen sizes. The common breakpoints of SAPUI5’s device API are used. The tool header is itself a container that may hold further containers with their own overflow mechanisms. The following sections describe how common containers should work on different devices.
Cozy and Compact
Like all SAP Fiori controls, the tool header can be shown in compact mode or in cozy mode. The height of the control itself will stay the same, only the contained controls are affected.
If an app implements side navigation in addition to the tool header, the menu icon must be the first item on the left-hand side of the tool header. The icon does not change its position or design on different device types.
You use the menu container to add an app menu to the tool header. An app menu presents users of an app with clearly structured lists of commands that are available across the various apps.
If the app needs to implement an app menu, it must be left aligned after the side navigation menu icon if side navigation is used. If side navigation is not implemented and no respective icon is present, the menu must be the first item in the tool header. The app menu and the side navigation must not have any dependencies and must work independently. An app menu may contain several top menu items, which themselves contain further menu items. An app menu and the name of the tool are mutually exclusive.
The app menu must reside in its own container and implement its own overflow mechanism if necessary. If the browser’s viewport is reduced, the menu container implements its own overflow mechanism based on standard UI5/SAP Fiori behavior.
Menu items can be partly overflowing as shown in the image below. When an overflow occurs, the overflow button comprising an ellipsis (…) is shown. When the user clicks or taps the overflow button, the hidden menu items are shown.
An overflow can also force the entire menu into an overflow mode as shown below. You should avoid this approach as it not only hides the entire menu, but also hides a visual clue that there is a menu at all.
In such cases, however, the overflow button is displayed, and when the user clicks or taps it, the entire menu is revealed.
Since some of the entries that are forced into the overflow behavior are hidden behind the overflow button, you should carefully consider the frequency with which the respective items are used. Items that are used most frequently should not go into the menu entries that are forced into an overflow behavior first.
The tool header may contain a horizontal navigation if there is no side navigation used in your application. The main navigation items of the app shall be displayed here. The navigation variant of the tool header may contain only first-level navigation items and no sub-items. Do not use the navigation variant of the tool header in addition to the side navigation. If you need further drill down, you may use e.g. a tree or a flat list on the left side of the content area. The tool header’s navigational variant and the name of the tool are mutually exclusive.
Navigation items can be partly overflowing as shown in the image below. When an overflow occurs, the overflow button comprising an ellipsis (…) is shown. When the user clicks or taps the overflow button, the hidden navigation items are shown.
The tool header may contain a utility section, but we strongly recommend that you think twice about putting utility items here as concepts already exist for placing utility items elsewhere, such as side navigation and the SAP Fiori launchpad/shell header. These concepts are leading, and none of these functionalities must be duplicated.
The utility section must be right aligned on the right-hand side of the tool header. It can contain, for example, a help, feedback, search, or logout function, a user menu, and/or the name of the currently logged-in user. We strongly recommend that you cluster these items into a menu below the user name. This avoids a potentially large list of entries that obstruct other item containers, such as the menu container, company logo, or the name of the tool. If the user name itself is too long, it must still be displayed and, if necessary, truncated with an ellipsis.
Consider that apps may not always run maximized on desktops, but also on tablets and phones with significantly less screen real estate.
The tool header is a horizontal container at the top of an app. It features a dark color to distinguish it visually from the app header.
The tool header is a flexible area that can contain various items:
- If side navigation is used on the user interface, the tool header contains the side navigation menu icon in the leftmost position.
- The tool header may include an app menu.
- It may contain the name of the tool. If applicable, this is also the title of the launch tile.
- It may contain utility functions, such as help or logout.
A tool that implements the tool header may be embedded in the SAP Fiori launchpad, which has its own header.
From the launchpad shell header, users have access to the launchpad services, including the home page, as well as the search, settings, and help functions. The tool is embedded in the shell and has little influence over its features.
None of the launchpad’s functionality must be duplicated. Tools must contribute corresponding actions and settings to the respective items on the launchpad.
If an app implements side navigation in addition to the tool header, the menu icon must be the first item on the left-hand side of the tool header. Ensure that the position, size, and appearance of the side navigation remain stable on the user interface.
If the app needs to implement an app menu, it must be left aligned. It must follow the side navigation menu icon if this is available. The app menu may reside in a separate container and implement its own overflow mechanism. An app menu, the company logo, and the name of the tool are mutually exclusive.
If the app needs to implement a horizontal navigation, it must be left aligned. Do not use the side navigation in addition to the horizontal navigation. The horizontal navigation, the company logo, and the name of the tool are mutually exclusive.
Do not display the company logo and the name of the tool if the application is implementing an app menu. The company logo and the name of the tool should only be contained if no application menu is used in the tool header. An application menu and the name of the tool are mutually exclusive.
Applications without Side Navigation
Left-align the company logo and center the name of the tool. Always precede the name of the tool with the label “SAP”.
Applications with Side Navigation
If the side navigation (sap.tnt.SideNavigation) is used in the application, place the company logo on the right-hand side of the side navigation icon in the tool header as shown below.
The utility section must be right-aligned on the right-hand side of the tool header. We strongly recommend that you think twice about putting utility items into the utility section as concepts already exist for placing utility items elsewhere, such as side navigation and the SAP Fiori launchpad shell bar. None of the functionalities of the side navigation or the SAP Fiori launchpad should be duplicated.
Want to dive deeper? Follow the links below to find out more about related controls, the SAPUI5 implementation, and the visual design.