Overview

The Application toolbar, or app bar, is found at the topmost area of an application page below the shell bar. As the most important design element in the app screen, it provides visual structure in a familiar form factor, helps users understand how to interact with that app, and provides access to important actions in a predictable way.

Application Toolbar - Collapsed

Application Toolbar - Expanded

Anatomy

1

13.76; 6.44

Document Title (required)

The title of the currently opened page or document. There is an optional subtitle that can be used to display additional information like file location or status.

2

14.37; 49.06

Menu Bar (required)

This is a group of menus (sap.m.MenuButton) offering a list of actions, commands, tools, and features a user can choose from at any time. In addition to the required menus, the Menu bar may also contain additional optional menus, including custom-made app-specific menus.

3

14.37; 93.56

Document Actions

Actions related to the document: Add to favorites, expand/collapse header, fullscreen, close current document. Switching between View and Edit modes is placed at the very left.

4

14.68; 68.31

Custom User Actions

The area is used to add custom user actions that are relevant to the user type. They should be customizable by the end user of the product based on their preference.

Usage

Use the Application toolbar for file or document-based tools and apps.

Or as an alternative to the Header Toolbar. That's because the app bar uses a classic File, Edit, and View configuration; whereas the Header toolbar has a different structure not necessarily dependent on file creation.