Magnolia 5.7 reached extended end of life on May 31, 2022. Support for this branch is limited, see End-of-life policy. Please note that to cover the extra maintenance effort, this EEoL period is a paid extension in the life of the branch. Customers who opt for the extended maintenance will need a new license key to run future versions of Magnolia 5.7. If you have any questions or to subscribe to the extended maintenance, please get in touch with your local contact at Magnolia.

Make the first action common and non-destructive. It is the first thing that tablet users see.

An action bar organizes actions into sections and groups. Section is the larger unit with a green label. Sections contain groups, separated from each other with a horizontal rule.

An action bar typically has two sections: one for actions and another for preview of the currently selected item, but you can have several. Put commonly used actions in the first section. They are used often so they must be available quickly. Other sections may contain secondary, not so important actions. For example, if you support moving items via drag-and-drop a move action doesn't need to be in the first section.

It is important that you put actions inside a group in the correct order. The action bar collapses on tablet devices, displaying only the first action in a group. Other actions are available only after a long press.

(tick) Add page is a safe first action for tablet users.

(error) Delete page is a destructive action.


When to use sections

  • You need at least one section. It should contain important actions. Further sections may contain secondary, not so important actions.

  • Label the first section according to what the user selects, such as "Folder" when the user selects a folder.
  • Make the label as specific as possible, such as "Image asset" instead of just "Asset" if the selected item is an image.

When to use groups

  • Put commonly used actions in the first section. They are used often so they must be available quickly.
  • Don't make the first action in a group destructive (delete) or mode-changing (edit).
  • Recommended group order:
    1. Add / Delete
    2. View / Edit / Rename / Move / Duplicate
    3. Publish / Unpublish
  • Collect similar actions together. For example, Preview and Edit switch modes so put them in the same group.
  • No labels