Shopware Design

Action Menu

Source

Usage

Action Menu reveals a short list of contextual actions for a specific record, card, row, or view. Use it for secondary actions like Duplicate, Move, Export, or Delete that should stay available without claiming permanent visual priority.

import { MtActionMenu } from "@shopware-ag/meteor-component-library";

Examples

Without icons

Grouped items

Use groups to separate related action sets and keep scanning easy.

Keyboard shortcuts

States

Nested submenu

External links

An item with a link prop renders as an external anchor and opens in a new tab.

Match trigger width

Anatomy

Action Menu is built from a small set of companion exports that work together:

  • mt-dropdown-menu-root manages the open and closed state for the menu.
  • mt-dropdown-menu-trigger defines the interactive element that opens the menu, usually a Button.
  • mt-dropdown-menu-portal renders the menu content in an overlay layer outside the surrounding layout flow.
  • mt-action-menu renders the menu surface itself.
  • mt-action-menu-item renders individual actions, links, shortcuts, and submenu triggers.
  • mt-action-menu-group separates related actions and keeps mixed icon alignment consistent inside a group.
  • mt-dropdown-menu-sub creates nested submenu flows when a second level is truly needed.

These parts are exported together so the pattern can be composed in one place.

API reference

Props

PropTypeDefault
is-sub-menubooleanfalse
match-trigger-width
When enabled, the menu content will match the trigger's width using Reka UI's CSS variables. Also constrains max-height to available viewport space.
booleanfalse

Slots

SlotBindings
default{}

Best practices

Do
  • Keep labels short, specific, and action-oriented.
  • Prioritize frequent actions and place destructive actions later in the menu.
  • Keep action ordering consistent across similar contexts.
  • Keep the menu focused on related actions for the same object or context.
  • Use mt-action-menu-group to separate action sets when grouping improves scanning.
  • Separate destructive actions into their own group when they appear alongside non-destructive actions.
  • Use the critical variant for destructive actions such as delete or remove.
  • Keep icon usage consistent within a visual group whenever possible.
  • Use shortcut only when the same action is also available from the keyboard elsewhere in the product.
Don't
  • Do not use Action Menu for the main action on a screen or card.
  • Do not hide critical task-completion steps only inside an Action Menu.
  • Do not group unrelated actions or create groups without a clear purpose.
  • Do not create deep or complex hierarchies when a flatter structure would be easier to scan.
  • Do not overuse groups or create many single-item groups when a flatter list would scan better.
  • Do not use icons, groups, or separators unless they add clarity.
  • Do not rely on color, icons, or shortcut labels alone to explain what an action does.

Behavior

  • Action Menu is a compound pattern, not a standalone trigger. It is always composed from the companion exports listed in Anatomy.
  • shortcut accepts a structured object with modifiers and key.
  • Supported modifier values are mod, ctrl, alt, shift, and meta.
  • Use mod for cross-platform shortcuts because it maps to Command on Mac and Control on Windows and Linux. Use meta only when you need the platform-specific meta key explicitly.
  • Supported special keys are enter, esc, tab, space, backspace, delete, up, down, left, and right.
  • Shortcut labels are formatted automatically for Mac and PC, and aria-keyshortcuts is added for assistive technology.
  • An mt-action-menu-item with a link prop renders as an external anchor and opens in a new tab.
  • is-sub-menu on mt-action-menu and is-sub-trigger on mt-action-menu-item are used together for nested submenu patterns.
  • match-trigger-width is useful when the menu should align visually with a wider trigger such as a row action or account switcher.
  • Keep nesting shallow. One submenu level is usually enough, and more than two levels should be avoided.

Accessibility

  • The trigger should have a clear accessible name so users understand what actions the menu contains.
  • Menu item labels should stay understandable without depending only on icons, color, or shortcut labels.
  • If you provide shortcut, it supplements the action label rather than replacing it.
  • Destructive actions should remain clearly labeled in text, not only visually differentiated through the critical variant.
  • Use submenu patterns carefully, because deep menu hierarchies are harder to navigate with keyboard and assistive technology.

Related components

  • Floating UI: when you need a custom popover surface with richer content such as text, filters, form fields, or mixed layout content instead of a menu of actions.

Artificial Intelligence

Principles for designing human-AI interactions with clear communication, transparency, and merchant control.

Avatar

A compact visual representation of a person or entity, shown as a profile image or initials.