Mirakl Design
Mirakl Design
  • Getting started
    • Welcome to Roma
      • Design principles
  • Design
    • Components
      • Actions
        • Action menu
        • Buttons
        • Button group
        • File download
        • Save bar
        • Tasklist
        • Contextual Toolbar
      • Datalist
      • Datatable
      • Feedback
        • Alerts
        • Activity Loader
        • Badge (status)
        • Empty state
        • Snackbar
      • Form
        • Fields
        • Pickers
        • Selection controls
        • Tree
      • Images
        • Illustrations
        • Icons
        • Media
      • Navigation
        • Hyperlink
        • Page title
        • Sidebar
        • Top bar
      • Overlays
        • Modal
        • Popover
        • Tooltip
        • Side Drawer
      • Structure
        • Global layout
        • Panel
          • Activable Panel
          • Clickable Panel
          • Expandable Panel
          • Panel tabs
          • Totalizer Panel
        • Card
    • Patterns
      • Advanced selection
      • Configure options
      • Displaying data
      • Displaying history
      • Errors
      • Forms
        • Form - Creation mode
        • Form - Edition mode
        • Form - In a modal
        • Error Management
        • Stepper form
        • Onboarding form
      • Loading
      • Progressive disclosure
  • content
    • Writing for Mirakl
      • Grammar and formatting
    • Vocabulary
      • Mirakl products
      • Which verb to use
Powered by GitBook
On this page
  • Overview
  • Guidelines
  • Organizing an Action Menu
  • Additional options to Action Menu
  • Progressive disclosure
  • Accessibility
  • Key takeaways

Was this helpful?

  1. Design
  2. Components
  3. Actions

Action menu

The action menu displays a list of actions triggered by a button. These actions have an immediate effect or redirect to another section of the Mirakl platform.

Last updated 1 year ago

Was this helpful?

Overview

After clicking a button (, , ), an action menu appears as an overlay, allowing users to choose from a collection of actions.

Guidelines

Action Menu must be used for secondary (or sub-)actions that do not require to be visible right away on the front page.

If all actions are disabled, consider disabling the parent component (button).

Organizing an Action Menu

The Action Menu component can accommodate both small and extensive lists of secondary actions. However, it's crucial to avoid overly long, non-hierarchical lists as they can overwhelm users.

As a general rule, if a list of actions starts feeling extensive (without defining an exact threshold, as each project may determine its own cognitive load limit), there are several effective options available to structure the component:

  1. Grouping Similar Actions: Consider categorizing semantically related Action Menu Items with a distinctive title (e.g., "Separator Action Menu Item"). This approach is particularly effective when all Action Menu Items can fit into a category and the list remains reasonably short.

  1. Creating Sub-level Actions: Introduce a sub-level of actions using the "Sub-menu" property. While this may make actions less visible, it efficiently organizes semantically related actions, even if others in the sub-menu cannot be easily categorized.

Additional options to Action Menu

  1. Search function : When dealing with a long list that can't be shortened, adding a search function to the component makes it easier for users to find what they need and improves their experience.

  1. Adding Media Elements: Enhance the visual appeal of the list by incorporating media visuals for each list item. This approach is particularly useful when a visual representation adds value beyond a simple icon.

  1. External link : In situations where an action is linked to an object but operates on a different URL, use the "external" property. This displays the associated icon, informing users that clicking the action will redirect them.

  1. Badge : Using badges is a great way to highlight one action from others in the action menu. For instance, when a new action is available in the menu or if one action is recommended compared to others.

Progressive disclosure

For temporarily inactive actions, adhere to the guideline of adding a tooltip upon hover, explaining why the action is inactive. If an action is never active for a specific user (e.g., due to their role), it should be omitted from the Action Menu to prevent unnecessary clutter and streamline the user experience.

Accessibility

  • The first item is automatically given focus when the action menu is triggered with the keyboard

  • Navigate through the list using the arrow keys

  • Give focus to the list's parent element by pressing the Esc or Shift+Tab key while on the first item of the list.

  • Activate the action using the enter/return key or the space key

Key takeaways

  • Group semantically related action for a better readability

  • Mix items with icons and items without icons

  • Use 2 separators in a row

  • Use a separator for the last item on the list

Clicking on an item automatically triggers the associated action. It must lead to a visual feedback ( or ) showing the effect and the result of the action to the user or redirect him to the appropriate section of the Mirakl platform.

Snackbar
Alert
Learn more about our Progressive Disclosure pattern
Using separators to group similar actions
Creating sub-level actions
Search function
Adding media element
External link in action menu
Use of a Badge in a Action Menu
2 versions of an action menu
Split Button
Menu Button
Icon Button