Intro

The header toolbar always appears in the header of the page. One main advantage of the header bar is that this bar is always visible and will not scroll away. It contains actions that are relevant for the entire page.

Our general guideline is to use only icon buttons or text buttons. Icon and text should not be combined into one button. Buttons are always right-aligned.

Buttons are sorted from frequently-used to seldom-used. This ensures that the most important buttons go into the overflow last.

Usage

Use the header toolbar if:

• Your page contains several controls, and the actions are valid for the entire page.

Do not use the header toolbar if:

• You have closing or finalizing actions for the whole page. Place them in the footer toolbar instead.
• You have actions that belong to a specific UI element. Place them as close as possible to the corresponding object (for example, in a table or chart toolbar).

Responsiveness

To enable responsiveness, use the OverflowToolbar control. For more information, see the corresponding section in the Toolbar Overview article.

The height of the toolbar changes on desktops (compact mode), tablets, and smartphones (cozy mode). For more information about cozy and compact modes, see Content Density.

Header toolbar on the object page – Size L

Components

The header toolbar can contain the following components:

• App-specific business actions
• Generic actions

The following actions count as generic:

• Flag and Favorite
• Share menu
• Overflow
• Paging

Behavior and Interaction

App-Specific Actions

If needed, the app team can define their own actions for the app. In this case, the text buttons should contain a short, unambiguous text that explains what action the button performs. A button text is usually a single-word verb (for example, Synchronize). Note that translated UIs may increase the length of the text string.

[internal_only]

[/internal_only]

Text vs. Icon Buttons

Use text-only buttons for all business actions (such as Edit and Create).
Use icon buttons only for generic actions (such as :icon-action for Share). For icons, always provide a suitable text label as a tooltip.

App-specific icon button in header toolbar

Add / Create

Place the Add or Create (item or row) action as close to the content as possible.

Add as icon button (+) in full screen mode

If the Add or Create action is a main function, the action should never be moved into the overflow.

Edit and Delete

If you want to perform a global edit action, use the Edit button.

If you want to perform a global delete action, use the Delete button.

Edit and Delete in header toolbar

Favorite and Flag (Generic)

Users can mark objects as a favorite or flag objects for quick subsequent retrieval. The user does this by clicking or tapping the relevant generic Favorite or Flag button in the header toolbar. For more information, see Flag and Favorite.

Favorite action in header toolbar

Share in Header Toolbar

Overflow (Generic)

If apps use the overflow toolbar, the overflow is generated automatically. The overflow is activated if there is not enough space for all the actions on the toolbar, or if some actions are considered less important than others. In this case, the app team decides that only certain actions appear in the overflow.

The app team also decides whether some actions are so important that they should never move into the overflow.

Since release 1.30, new features have been added to the overflow toolbar. The “…” (overflow) button is now a toggle button and can be used to switch the overflow menu on and off.

The user clicks or taps the overflow button to open a popover. In this action sheet, all icon buttons are labeled with text and the user can overflow the following controls:

• sap.m.SegmentedButton – when in the overflow, the segmented button is in select mode and looks like a select button, although it is technically still a segmented button
• sap.m.Select – when in the overflow, it is always in default mode to take advantage of the extra space, even if it was set to icon-only mode in the toolbar
• sap.m.ToggleButton
• sap.m.Checkbox
• sap.m.Input
• sap.m.SearchField
• sap.m.ComboBox
• sap.m.DateTimeInput

Split-screen layouts have their own overflow menus.

All buttons go into the overflow from right to left. This ensures that the most important buttons are the last to be moved into the overflow menu.

Paging (Generic)

Use the Paging button if you want to navigate to the previous or next object.

If you are using the Share button, place paging buttons to the right of the Share button.

Paging buttons in header toolbar

Styles

• Use button styles only if they help the user, and not for decoration.
• Use them for primary actions, such as Edit and Create.
• Use a positive/negative style (property: type = accept or reject) or an emphasized style (property: type = emphasized).
• Use only one emphasized button per toolbar and never mix emphasized and semantic buttons.
  Exception 1: Messaging button appears
  Exception 2: Object has been flagged or marked as a favorite

For more information, see Button.

Guidelines

Please see the Guidelines section in the toolbar overview article.

Resources

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