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, 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 that reacts responsively to the viewport width.
Responsiveness and Adaptiveness
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 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 must 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.
An app menu, the company logo, and the name of the tool are mutually exclusive.
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 header. None of the functionalities of side navigation and the SAP Fiori launchpad must be duplicated.
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 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.
Want to dive deeper? Follow the links below to find out more about related controls, the SAPUI5 implementation, and the visual design.