Introduction

The Actions Menu is the compact way to offer several contextual actions on a piece of content, without leaving the list. It is integrated into meta-cells, and into the groups of elements they contain, such as the ToolBar. A discreet icon, usually the three-dot icon, opens a menu that lists every available action, such as commenting, saving the content as a favorite, or sharing it.

Each action in the menu is an Action, and the Actions Menu groups them behind a single trigger. It is not a navigation menu. An entry that leads to a section of the app is an Item.

Anatomy

The trigger

The trigger is an icon placed in the cell. It follows the actions enabled in the back office, not each piece of content. When several actions are enabled, it is the three-dot icon, even on a piece of content where only one of them applies. When a single action is enabled, the trigger is the icon of that action itself, directly in the cell.

The menu

Once open, the menu lists the actions one below the other, each with an icon, then a label. When an Action carries a count, such as the number of comments, the count is written in the label, between parentheses, as in Comment (11).

Properties

Shape

The Shape atom applies to the menu, so its corners are Sharp, Rounded or Round, following the setting of the app.

Colors

The colors of the menu are set in the back office, for each list. In a Condensed list, the Toolbar block sets them. Toolbar Background gives its background, Inactive Icon the icons and their labels, and Active Icon the favorite action once the content is saved.

Layout

Spacing

The spacing of the menu is fixed, the same on every device. It leaves 16px around the actions and between two actions, and 8px between the icon and its label. The icon sits in a 20px square, and the label is written in the system font, at 14px.

Placement

The cell that hosts the Actions Menu decides where its trigger goes. In a compact cell, it sits in the top right corner, on the row of the title, whichever side the thumbnail takes. In a small card, it closes the row of the ToolBar. The menu opens from the trigger and covers the cells below.

Behavior

Opening and closing

A tap on the trigger opens the menu. While it is open, the list does not respond, and a tap outside the menu only closes it. A tap on an action closes the menu and carries it out. Save adds the content to the favorites and Delete removes it, Share opens the share dialog of the device, Comment opens the comments.

What the menu offers

The actions are contextual. They depend on the type of content, and only the actions allowed on the detail page of the content are offered. They can also be hidden from a list altogether, by unticking them under Display, in the back office. The favorite action reflects its state, Save while the content is not saved yet, Delete once it is.