Overview
The Meteor component library provides the Action Menu (mt-action-menu) component for creating dropdown menus with rich features like keyboard shortcuts, external links, menu items, grouping, and various states.
The context menu components (mt-context-button, mt-context-menu-item) exist in the source code but are not currently exported in the public API. For context menus or popovers, use the MtPopover component instead.
import { DropdownMenu, DropdownMenuTrigger, DropdownMenuSub } from 'reka-ui';
import { MtActionMenu, MtActionMenuItem, MtActionMenuGroup } from '@shopware-ag/meteor-component-library';
Renders the menu as a submenu with adjusted positioning
Makes the menu content match the trigger button’s width
variant
'default' | 'critical'
default:"'default'"
Visual style variant. Use ‘critical’ for destructive actions
Icon name to display before the item label
Keyboard shortcut to display and announce for accessibility
Renders the item as a submenu trigger with an arrow indicator
External URL. Renders the item as a link that opens in a new tab
Shortcut Definition
interface ShortcutDefinition {
modifiers?: ('mod' | 'ctrl' | 'alt' | 'shift' | 'meta')[];
key: string | 'enter' | 'esc' | 'tab' | 'space' | 'backspace' | 'delete' | 'up' | 'down' | 'left' | 'right';
}
Usage Examples
<template>
<DropdownMenu>
<DropdownMenuTrigger>
<button>Actions</button>
</DropdownMenuTrigger>
<MtActionMenu>
<MtActionMenuItem icon="edit-s">Edit</MtActionMenuItem>
<MtActionMenuItem icon="copy-s">Duplicate</MtActionMenuItem>
<MtActionMenuItem icon="archive-s">Archive</MtActionMenuItem>
<MtActionMenuItem variant="critical" icon="trash-s">Delete</MtActionMenuItem>
</MtActionMenu>
</DropdownMenu>
</template>
<script setup>
import { DropdownMenu, DropdownMenuTrigger } from 'reka-ui';
import { MtActionMenu, MtActionMenuItem } from '@shopware-ag/meteor-component-library';
</script>
<template>
<DropdownMenu>
<DropdownMenuTrigger>
<button>Edit</button>
</DropdownMenuTrigger>
<MtActionMenu>
<MtActionMenuItem
icon="undo-s"
:shortcut="{ modifiers: ['mod'], key: 'z' }"
>
Undo
</MtActionMenuItem>
<MtActionMenuItem
icon="redo-s"
:shortcut="{ modifiers: ['mod', 'shift'], key: 'z' }"
>
Redo
</MtActionMenuItem>
<MtActionMenuItem
icon="copy-s"
:shortcut="{ modifiers: ['mod'], key: 'c' }"
>
Copy
</MtActionMenuItem>
<MtActionMenuItem
icon="paste-s"
:shortcut="{ modifiers: ['mod'], key: 'v' }"
>
Paste
</MtActionMenuItem>
</MtActionMenu>
</DropdownMenu>
</template>
<template>
<DropdownMenu>
<DropdownMenuTrigger>
<button>More Options</button>
</DropdownMenuTrigger>
<MtActionMenu>
<MtActionMenuGroup label="View">
<MtActionMenuItem icon="grid-s">Grid View</MtActionMenuItem>
<MtActionMenuItem icon="list-s">List View</MtActionMenuItem>
</MtActionMenuGroup>
<MtActionMenuGroup label="Actions">
<MtActionMenuItem icon="download-s">Export</MtActionMenuItem>
<MtActionMenuItem icon="share-s">Share</MtActionMenuItem>
</MtActionMenuGroup>
<MtActionMenuGroup>
<MtActionMenuItem variant="critical" icon="trash-s">
Delete All
</MtActionMenuItem>
</MtActionMenuGroup>
</MtActionMenu>
</DropdownMenu>
</template>
<script setup>
import { DropdownMenu, DropdownMenuTrigger } from 'reka-ui';
import { MtActionMenu, MtActionMenuItem, MtActionMenuGroup } from '@shopware-ag/meteor-component-library';
</script>
<template>
<DropdownMenu>
<DropdownMenuTrigger>
<button>Help</button>
</DropdownMenuTrigger>
<MtActionMenu>
<MtActionMenuItem icon="book-s">
Documentation
</MtActionMenuItem>
<MtActionMenuItem
icon="external-link-s"
link="https://community.example.com"
>
Community Forum
</MtActionMenuItem>
<MtActionMenuItem
icon="external-link-s"
link="https://github.com/shopware/meteor"
>
GitHub Repository
</MtActionMenuItem>
<MtActionMenuItem icon="question-circle-s">
Contact Support
</MtActionMenuItem>
</MtActionMenu>
</DropdownMenu>
</template>
<template>
<DropdownMenu>
<DropdownMenuTrigger>
<button>File</button>
</DropdownMenuTrigger>
<MtActionMenu>
<MtActionMenuItem icon="file-plus-s">New File</MtActionMenuItem>
<MtActionMenuItem icon="folder-open-s">Open</MtActionMenuItem>
<DropdownMenuSub>
<MtActionMenuItem is-sub-trigger icon="save-s">
Save As...
</MtActionMenuItem>
<MtActionMenu is-sub-menu>
<MtActionMenuItem>PDF Document</MtActionMenuItem>
<MtActionMenuItem>HTML Page</MtActionMenuItem>
<MtActionMenuItem>Plain Text</MtActionMenuItem>
</MtActionMenu>
</DropdownMenuSub>
<MtActionMenuItem variant="critical" icon="close-s">
Close
</MtActionMenuItem>
</MtActionMenu>
</DropdownMenu>
</template>
<script setup>
import { DropdownMenu, DropdownMenuTrigger, DropdownMenuSub } from 'reka-ui';
import { MtActionMenu, MtActionMenuItem } from '@shopware-ag/meteor-component-library';
</script>
<template>
<DropdownMenu>
<DropdownMenuTrigger>
<button>Actions</button>
</DropdownMenuTrigger>
<MtActionMenu>
<MtActionMenuItem icon="eye-s">View</MtActionMenuItem>
<MtActionMenuItem icon="edit-s">Edit</MtActionMenuItem>
<MtActionMenuItem icon="copy-s" disabled>Duplicate</MtActionMenuItem>
<MtActionMenuItem variant="critical" icon="trash-s" disabled>Delete</MtActionMenuItem>
</MtActionMenu>
</DropdownMenu>
</template>
Features
- Keyboard shortcuts: Display keyboard shortcuts for menu items
- Grouping: Organize related items with visual dividers
- External links: Render items as links that open in new tabs
- Nested menus: Create hierarchical menu structures with submenus
- Accessibility: Full keyboard navigation and screen reader support
- Variants: Support for default and critical (destructive) actions
- Icons: Display icons alongside menu item labels
Accessibility
- Menu items announce keyboard shortcuts to screen readers
- Full keyboard navigation support (arrow keys, Enter, Escape)
- Proper ARIA attributes for menu structure
- Focus management when opening and closing menus
Source Files