--- title: "Actions Menu | GoodBarber's Design System" description: "The Actions Menu groups the contextual actions of a GoodBarber cell behind one icon, to comment, save or share a piece of content without leaving the list." canonical_url: "https://www.goodbarber.com/uxdesign/actions-menu/" lang: en --- # Actions Menu | GoodBarber's Design System [Design System](https://www.goodbarber.com/uxdesign/) ![](https://portal.ww-cdn.com/portal_static/svg/fapro/solid/grid.f4c520ac8628.svg) [https://www.goodbarber.com/uxdesign/](https://www.goodbarber.com/uxdesign/) ![](https://portal.ww-cdn.com/portal_static/svg/fapro/regular/chevron-up.b5a5ae872a5d.svg) ![](https://portal.ww-cdn.com/portal_static/svg/fapro/regular/chevron-down.5c1a2eb6da12.svg) ![](https://portal.ww-cdn.com/portal_static/svg/fapro/solid/grid.f4c520ac8628.svg) [Overview](https://www.goodbarber.com/uxdesign/) - [Foundations](/uxdesign/foundations/) * Layout + [Grid](/uxdesign/grid/) + [Spacing](/uxdesign/spacing/) + [Breakpoints](/uxdesign/breakpoints/) + [Layers](/uxdesign/layers/) * Graphic elements + [Color](/uxdesign/color/) + [Typography](/uxdesign/typography/) + [Images Aspect Ratios](/uxdesign/images-aspect-ratios/) + [Icons](/uxdesign/icons/) - [Atomic Components](/uxdesign/atomic-components/) * [Color atom](/uxdesign/atom-color/) * [Font atom](/uxdesign/atom-font/) * [Image atom](/uxdesign/atom-image/) * [Gradient atom](/uxdesign/atom-gradient/) * [Shape atom](/uxdesign/atom-shape/) * [Shadow atom](/uxdesign/atom-shadow/) * [Size atom](/uxdesign/atom-size/) * [Border atom](/uxdesign/atom-border/) * [Blur atom](/uxdesign/atom-blur/) * [Overlay atom](/uxdesign/atom-overlay/) * [Immersive feedback atom](/uxdesign/atom-immersive-feedback/) - [UI Elements](/uxdesign/ui-elements/) * [Action](/uxdesign/action/) * [Actions Menu](/uxdesign/actions-menu/) * [Author](/uxdesign/author/) * [Content](/uxdesign/content/) * [DateBullet](/uxdesign/datebullet/) * [Distance](/uxdesign/distance/) * [Duration](/uxdesign/duration/) * [Item](/uxdesign/item/) * [Item Icon](/uxdesign/item-icon/) * [Item Indicator](/uxdesign/item-indicator/) * [Item Label](/uxdesign/item-label/) * [Media](/uxdesign/media/) * [Pager](/uxdesign/pager/) * [Play](/uxdesign/play/) * [Player](/uxdesign/player/) * [Text](/uxdesign/text/) * [ToolBar](/uxdesign/toolbar/) * [Widget Header](/uxdesign/widget-header/) - [UI Components](/uxdesign/ui-components/) * [Background](/uxdesign/background/) * [Text Field](/uxdesign/textfield/) * [Dropdown](/uxdesign/dropdown/) * [Date & Time Picker](/uxdesign/date-time-picker/) * [Checkboxes & Radio Button](/uxdesign/checkboxes-radio-button/) * [Button](/uxdesign/button/) * [Thumbnail](/uxdesign/thumbnail/) * [Form](/uxdesign/form/) * [TabBar](/uxdesign/tabbar/) # Actions Menu UI Elements The Actions Menu groups several actions on a piece of content behind one icon, right in the list. [https://portal.ww-cdn.com/portal_static/images/designsystem/videos/actions-menu.31268b80716f.mp4](https://portal.ww-cdn.com/portal_static/images/designsystem/videos/actions-menu.31268b80716f.mp4) ## 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](/uxdesign/toolbar/). A discreet [icon](/uxdesign/icons/), 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](/uxdesign/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](/uxdesign/item/). ## Anatomy ### The trigger The trigger is an [icon](/uxdesign/icons/) 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](/uxdesign/action/) itself, directly in the cell. ![Several actions, then a single one](https://portal.ww-cdn.com/portal_static/images/designsystem/Components-ActionsMenu-Anatomy-Trigger.d9404c8b6171.png) *Several actions, then a single one* ### The menu Once open, the menu lists the actions one below the other, each with an [icon](/uxdesign/icons/), then a label. When an [Action](/uxdesign/action/) carries a count, such as the number of comments, the count is written in the label, between parentheses, as in Comment (11). ![The open menu](https://portal.ww-cdn.com/portal_static/images/designsystem/Components-ActionsMenu-Anatomy-Menu.e06f0c569735.png) *The open menu* ## Properties ### Shape The [Shape](/uxdesign/atom-shape/) atom applies to the menu, so its corners are Sharp, Rounded or Round, following the setting of the app. ![Sharp, Rounded and Round](https://portal.ww-cdn.com/portal_static/images/designsystem/Components-ActionsMenu-Properties-Shape.d04045ad72df.png) *Sharp, Rounded and Round* ### 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. ![The background, and an active action](https://portal.ww-cdn.com/portal_static/images/designsystem/Components-ActionsMenu-Properties-Colors.55fed442e0e2.png) *The background, and an active action* ## 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](/uxdesign/icons/) sits in a 20px square, and the label is written in the system font, at 14px. ![The fixed spacing of the menu](https://portal.ww-cdn.com/portal_static/images/designsystem/Components-ActionsMenu-Layout-Spacing.41e61b1f3d03.png) *The fixed spacing of the menu* ### 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](/uxdesign/thumbnail/) takes. In a small card, it closes the row of the [ToolBar](/uxdesign/toolbar/). The menu opens from the trigger and covers the cells below. ![In a compact cell and in a small card](https://portal.ww-cdn.com/portal_static/images/designsystem/Components-ActionsMenu-Layout-Placement.bff21a530bef.png) *In a compact cell and in a small card* ## 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. ![Closed, then open](https://portal.ww-cdn.com/portal_static/images/designsystem/Components-ActionsMenu-Behavior-Open.4d2ed082cbd9.png) *Closed, then open* ### 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. ![Save, then Delete](https://portal.ww-cdn.com/portal_static/images/designsystem/Components-ActionsMenu-Behavior-Favorite.45660d83116c.png) *Save, then Delete*