Information

This control has been designed specifically for the tool landscape for SAP HANA Cloud Platform. It is not intended for use in regular SAP Fiori applications. 

Intro

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.

General page structure of a tool
General page structure of a tool

Usage

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.

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.

Size S
Size S
Size M
Size M
Size L
Size L

Components

Side Navigation Menu Icon

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.

Menu Container

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.

Tool header with menu container
Tool header with menu container

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.

Tool header with menu container – Size M
Tool header with menu container – Size M

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.

Tool header with menu container – Size S
Tool header with menu container – Size S

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.

Utility Section

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.

Utility section in the tool header
Utility section in the tool header

Guidelines

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.

Side Navigation Menu Icon

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.

App Menu

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.

Company Logo and Name of the Tool

App Menu

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.

Tool header with app menu
Tool header with app menu

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.

Tool header without side navigation
Tool header without side navigation

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. 

 

Tool header with side navigation
Tool header with side navigation

Utility Items

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.

Resources

Want to dive deeper? Follow the links below to find out more about related controls, the SAPUI5 implementation, and the visual design.

Elements and Controls

Implementation