01. App bar

An app bar is used to provide information about the current screen and action buttons.

Title

A title can be an app title, page title, or page filter. If the entire title cannot be displayed due to the length, action buttons from the far-right can be placed under more options buttons as a dropdown menu. The displayed action buttons may be shown or hidden, depending on the screen settings (e.g., multi-language/font styles). However, the action buttons should still be displayed in accordance with the rules above.

Action buttons

It’s recommended that you use icons for action buttons. However, you may use text buttons for menus that you find difficult to express using icons.
It’s also recommended that you display three or fewer action buttons, including the title. If there are no actions available on the current screen, then don’t display any buttons.

More options

Each menu shown after tapping the More options button is an option that can affect the app that is currently running or the component chosen on the screen. For an option that requires the user to turn on/off or toggle, a checkbox can be provided.
The rest of the menus not provided as floating action buttons or action buttons are being included in the more options button.

Spinner

In the default state, a spinner displays the current chosen value. When the user taps the spinner, a dropdown menu opens, showing all available values. When the user taps outside the dropdown menu, the spinner closes.