Page History

...

Toolbar actions are a key part of action placement. They control functions of the content and of the container. Actions in toolbars are represented by action icons. When there are too many actions, group them they are grouped into an overflow “More” menu.

Toolbars appear across multiple organisms. They exist in the header, in boardlets, in ghost boardlets, in cards, in dialogs, and in table rows. Each placement follows specific rules that fit its use case.

...

The header toolbar contains actions that affect all applications the entire application or the entire user environment. There is a distinction between Primary primary and secondary actions. Primary actions are always be available, while secondary actions might not be present in some dashboards.

Navigation items like the burger menu or breadcrumbs are placed on the left. Form more can be found in [Navigation]. If the inline datepicker in the header is active, it is also placed in the left toolbar at the armost farmost right position.

Possible actions for the right sidebar action toolbar include:

...

Never place more than three actions per toolbarfirst actionbar. If it is necessary to place more than three actions in the boardlet, they are grouped and can be found under the "more" icon. Grouping This is always done with the help of an overflow menu.

The actions of the toolbar are divided into primary and secondary. Secondary actions are place inside the "More" actions in the form of an Overflow Menuoverflow menu. The number of secondary actions is not limited. But it is recommended not to place more than 8 actions, because otherwise the overflow menu becomes too long. this This can disturb the clarity.

Second Actionbar

...

The ghost boardlet toolbar follows the boardlet rules. Alignment and grouping are the same. The only difference is the first actionbar, which contains only a single More iconthe more action with a dropdown menu.

Card toolbar

The placement and rules of actions inside cards depend on the tye of card:

...