Overview
A header toolbar offers universal actions that apply to the whole page. By aligning it with the page title, it creates a direct link between the page elements and their corresponding actions. When actions are located beside the title, it suggests they are of equal importance within the hierarchy. Global actions might include Editing or Deleting, along with other actions specific to the page interface like changing the page view, expanding or reducing the page size, adding bookmarks, or making comments.
Look and Feel
When to Use
Recommended
- Place actions that affect the whole page (including tabs or sections).
- Consider using icon and text buttons for primary actions.
- Truncate in headers according to priority.
- When multiple actions would cause a line break, use overflow for truncation
With multiple primaries (Edit, Save) use one of the following methods:
- Deemphasize the first primary (Edit) and implement the finalizing action as the primary
- Implement a dialog to overlay the page and provide the finalizing action
- Implement a wizard to overlay the page and provide the finalizing action
Not Recommended
- Do not truncate primary actions.
- Do not use icon-only buttons for primary actions.
- Don't place actions in the page header that don't affect the entire page/tabs
Header Actions
Actions within the header toolbar must always be visible, independent of the scrolling position on the screen.
(“sticky behavior”). Titles are generally shown on the left side of the screen, where actions are aligned on the right.
If there is insufficient space to show all actions (in a whole window), they are successively truncated to an overflow menu, depending on their priority. Header actions affect the content on a page level.
Examples of header toolbar actions
Stick to right-aligned actions.
Actions with a common purpose are grouped and arranged in the following order:
- Business actions (Edit, Delete, …)
- Manage content (Filter, …)
- Manage layout (Fullscreen, Expand/Collapse, …)
- Generic actions (Share, Favorite …)
Actions within a group are arranged from left to right according to their importance.
- The most important action is emphasized via primary action indication.
- Only one primary action is shown on an entire page (across both header and footer toolbars).
- The primary action button is placed on the very left (even if it belongs to a group further to the right).
- If both header and footer toolbars are available, the footer shows the primary action since it is usually more in focus.
Workflow actions (Save, Post, etc.) are generally placed in the footer toolbar; do not put them in the header toolbar.
- Only place finalizing actions in the header in exceptional cases and only if very few actions are needed.
In this case, place them first.
Fiori Guidelines - Action Placement