The tool header is a horizontal container at the top of the tool or application. It takes up the full width of the screen, floats above the content, and does not scroll. It acts as a container for global elements, such as a global application menu, horizontal navigation, name and branding of the app, SAP CoPilot, and utility functions. The main tool header container can hold further containers, which can each have their own overflow mechanisms. Examples of (sub)containers might be a menu container or horizontal navigation that reacts responsively to the device class and/or viewport width.
Tool Header Variants
With Side Navigation Menu Icon / Title and Caret
Tool header with side navigation menu icon
Tool header with title and caret
Side navigation menu icon
|The side navigation menu icon is used to collapse/expand the side navigation.||xe1de|
|B + 2
Title and navigation/caret
|Title and caret are used to open and close the navigation menu.||xe1ef|
Logo and Home navigation
|Clicking the logo navigates to the tool’s home screen, if implemented.|
|The title describes the main component that contains the content. We recommend using a title that corresponds to the name in the SAP product list.
Note that clicking the title doesn’t open the navigation menu if the side navigation menu icon is being used.
|You can use the second title to show secondary information about the product, such as the name of the service or functional area. The second title is optional.|
Shell bar background
|Place any additional, product-specific actions here.|
|Triggers the notifications.||xe23a|
|If the viewport becomes too small to display all the actions, they are moved into the overflow menu, and a corresponding overflow icon is shown.||xe1f2|
|Triggers the user menu.||xe082|
|If implemented, the product switch opens a view for switching between solutions. If the product switch is not implemented, the icon is not displayed.||xe071|
With Global Application Menu
Tool header with global application menu
Menu / side navigation menu icon
|The side navigation menu icon is used to collapse / expand the side navigation.|
|Use an overflow toolbar for the container and menu buttons for the menu and its items.|
|If you are using the menu variant, and SAP CoPilot is implemented, place the SAP CoPilot icon in the actions section. SAP CoPilot will then be displayed on all screen sizes.|
With Tab Navigation
Tool header with tab navigation
|Use the solid logo.
Clicking the logo navigates to the tool’s home screen, if implemented.
|Tab navigation items use the icon tab bar control with its own overflow mechanism.|
|If you are using the tab navigation variant, and SAP CoPilot is implemented, place the SAP CoPilot icon in the actions section. SAP CoPilot will then be displayed on all screen sizes.|
For the main navigation, use either the side navigation, the navigation menu, or the tool header’s tab navigation variant. These options are mutually exclusive, since they are used for first and second level navigation items.
The global application menu and tab navigation variants are mutually exclusive and cannot be used together.
Use the tool header if:
- The app is launched without the SAP Fiori launchpad.
- The target group of your application is somewhat or purely technical in nature, and the application’s main use cases are in development, administration, or configuration.
- The application uses other tool components, such as side navigation or one of the layouts or floorplans for tools.
- The application makes use of a global application menu.
- The application uses a horizontal tab navigation as main navigation.
Do not use the tool header if:
- Your scenarios are not in the tooling or administration space.
- Your application target group consists of non-technical users.
- You do not have to cater for complex navigation (for example, that requires side navigation)
The tool header adjusts to different screen sizes. The tool header is a container that can hold further containers with their own overflow mechanisms.
If used, the menu container and tab navigation should overflow last, since they are more important than the title.
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 header control itself stays the same, only the controls within it are affected.
If an app implements the side navigation in addition to the tool header, the side navigation 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, screen sizes, or browser sizes.
Tool header with side navigation icon
You can use a specific variant of the tool header to add a global application menu to the tool header. A global application menu presents users of an app with clearly structured lists of commands that are available throughout the application.
If you implement a global application menu, it must be left aligned after the title. The global application menu and the side navigation must work independently of each other. A global application menu can contain several top menu items, which can each contain further menu items.
Tool header with global application menu - Size L
The global application 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 SAP Fiori behavior.
When there is no longer sufficient space to show all menu items, some items move into the overflow menu. This is indicated by the overflow button with an ellipsis (…), as shown in the image below. When the user clicks the overflow button, the hidden menu items are shown.
The overflow mechanism can also move almost the entire menu into an overflow menu, as shown below.
In this case, clicking the overflow button reveals the entire menu.
Since some of the entries that are forced into the overflow menu are hidden behind the overflow button, carefully consider how often the respective items are used. Make sure that frequently-used menu items are not the first to move into the overflow menu.
You can use horizontal navigation in the tool header if your application doesn’t use side navigation or a mega menu. The horizontal navigation contains the main navigation items for the app. The navigation variant of the tool header can contain only first-level navigation items and no subitems. Do not use the navigation variant of the tool header together with the side navigation or the navigation menu. If you need further drilldown options, you can use a tree or a flat list on the left side of the content area, for example.
Tool header with tab navigation – Size L
Navigation items can move into the overflow menu. In this case, the overflow button with an ellipsis (…) is shown. Clicking the overflow button shows the hidden navigation items.
Actions (such as Notifications, User Menu, Product Switch, and additional actions) must be right-aligned on the right-hand side of the tool header.
Consider that apps may not always run maximized on desktops, but also on tablets and phones with significantly less screen real estate.
Actions in the tool header
We strongly recommend providing a user menu.
The user menu is opened using the icon button that is part of the actions section on the right-hand side of the tool header. Use the avatar control to trigger the user menu.
If no user image is available, the avatar control uses either the user initials or an icon. Alternatively, you can display the full first and last name if the use case requires it. If you use this option and the full user name is too long, it must still be displayed. If necessary, truncate the name using the ellipsis.
The tool header is a horizontal container at the top of an app. It is a flexible area that can contain various items:
- If the 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 a global application menu.
- It must contain the name of the tool.
- It contains actions, as defined above.
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.
Do not duplicate any of the functionality provided by the launchpad. Tools must add their specific 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 a global application menu, it must be left aligned. It must follow after the side navigation menu icon (if this is available), the company logo, and the title. The global application menu can reside in a separate container and have its own overflow mechanism.
If the app requires horizontal tab navigation, it must be left aligned. Do not use the side navigation together with horizontal tab navigation. Only use the tab navigation variant if there are no more than 7 first-level navigation items in your application. Otherwise, use the side navigation or the navigation menu.
Left-align the company logo. After the company branding, display the title of the application.
Right-align actions on the right-hand side of the tool header. Placement and actions follow the concepts of the SAP Fiori launchpad shell bar.
To keep the header section as clean as possible, we strongly recommend that you avoid putting too many items into the actions section.
Do not include more than 10 entries in the user menu.
All entries apart from the user name must use icon and text.
If functions are available in the user menu, do not show them in the side navigation or navigation menu.
Want to dive deeper? Follow the links below to find out more about related controls, the SAPUI5 implementation, and the visual design.