- overlay: derive popover placement from host in interaction controller (#5078) (635cf53)
Note: Version bump only for package @spectrum-web-components/action-menu
- lock prerelease versions for Spectrum CSS (#5014) (8aa7734)
- overlay: make :focus-visible consistent when using overlay type modal (#4912) (7a5f786), closes #5021
- add an optional chromatic vrt action (7d2f840)
- picker: add forcePopover property (#5041) (3651e57)
Note: Version bump only for package @spectrum-web-components/action-menu
Note: Version bump only for package @spectrum-web-components/action-menu
- remove deprecated 'static' references (#4818)
- add
static-color
to replace static
(#4808) (43cf086)
Note: Version bump only for package @spectrum-web-components/action-menu
- action-menu: dispatch scroll event (#4715) (c76f3f5)
- picker: added a custom class to make
:focus-visible
styles consistent across all browsers (#4724) (d667d08)
Note: Version bump only for package @spectrum-web-components/action-menu
Note: Version bump only for package @spectrum-web-components/action-menu
- breadcrumbs: add Breadcrumbs component (#4578) (acd4b5e)
Note: Version bump only for package @spectrum-web-components/action-menu
-
action-menu clicking a menu item in an ActionMenu tray doesn't register a click behind it ([4461] (https://github.com/adobe/spectrum-web-components/issues/4461)) ([56366ce] (https://github.com/adobe/spectrum-web-components/commit/56366ce2750bb4bb5c6e3fa5fe7d809434497adb))
-
action-menu ActionMenu tray in mobile device doesn't dispatch multiple events ([4459] (https://github.com/adobe/spectrum-web-components/issues/4459)) ([56366ce] (https://github.com/adobe/spectrum-web-components/commit/56366ce2750bb4bb5c6e3fa5fe7d809434497adb))
Note: Version bump only for package @spectrum-web-components/action-menu
Note: Version bump only for package @spectrum-web-components/action-menu
Note: Version bump only for package @spectrum-web-components/action-menu
Note: Version bump only for package @spectrum-web-components/action-menu
- action-menu: allow menu groups to handle their own selections (#4397) (5a19051)
Note: Version bump only for package @spectrum-web-components/action-menu
Note: Version bump only for package @spectrum-web-components/action-menu
Note: Version bump only for package @spectrum-web-components/action-menu
- asset: use core tokens (99e76f4)
Note: Version bump only for package @spectrum-web-components/action-menu
Note: Version bump only for package @spectrum-web-components/action-menu
Note: Version bump only for package @spectrum-web-components/action-menu
Note: Version bump only for package @spectrum-web-components/action-menu
- overlay: clean position data on close (edac590)
- picker,action-menu,split-button: update interaction model (#3935) (bae7d52)
- overlay: move closed overlays to "display: none" (fc0278b)
- picker: force close slotted Tooltip elements with disabled when Menu openes (82c8f12)
- menu: support navigating to and selecting Menu Items in Menu Groups (8469ab2)
- action-menu: allow tray to display full width (31415e4)
Note: Version bump only for package @spectrum-web-components/action-menu
Note: Version bump only for package @spectrum-web-components/action-menu
Note: Version bump only for package @spectrum-web-components/action-menu
Note: Version bump only for package @spectrum-web-components/action-menu
- menu: allow
change
events to be direct (#3689) (b2cd3da)
- action-menu: stack a "label-only" slot on top of the others to allow no icon menu buttons (6b5817d)
- menu: allow Menu elements to be controlled (74ed7fb)
- picker,split-button: include "tooltip" slot in the main button (699b8af)
- action-menu,split-button: ensure toggling the Menu closed completes (2dd0f98)
- action-menu: added static attribute support (#3573) (25889a8)
- picker,action-group,split-button: leverage Overlay v2 (170a223)
- make lots of things lazy (b8fa3ad)
- action-menu: add a slot for Tooltip content (#3488) (23cef3a)
- menu: convert to core tokens (#3254) (da43540)
Note: Version bump only for package @spectrum-web-components/action-menu
- action-button,action-menu,picker,split-button: expand and update application of aria-* attributes (52c0156)
Note: Version bump only for package @spectrum-web-components/action-menu
Note: Version bump only for package @spectrum-web-components/action-menu
Note: Version bump only for package @spectrum-web-components/action-menu
Note: Version bump only for package @spectrum-web-components/action-menu
Note: Version bump only for package @spectrum-web-components/action-menu
- abstract "hasVisibleFocusInTree" functionality and return trigger focus after close (4f39f2c)
- action-menu: apply slot text observer pattern (bbe6bb5)
- action-menu: call super.firstUpdated for focus control (88bad85)
- action-menu: fix 2510, unable to control top-level action-menu selection (c9198c2)
- action-menu: never set item selected values when selects is undefined (5237fdb)
- action-menu: provide action menu size to action button (b963f57)
- action-menu: spectrum adherence update (6eb1860)
- action-menu: stop stripping selected state from submenu items (968d1f2)
- analyze type errors, and add deprecated syntax tests (b7e67a1)
- code review feedback (23b84fc)
- css fixes for action-menu (8c804c8)
- ensure Action Menu Item with [href] close the menu (6b3d87f)
- expand sync offering for elements with overlay content (0195843)
- include "type" in package.json, generate custom-elements.json (1a8d716)
- include default export in the "exports" fields (f32407d)
- include the "types" entry in package.json files (b432f59)
- menu: ensure that Groups in Action Menus are rendered with the correct width (a996a10)
- missed ActionMenu for type changes (fa66d56)
- normalize "event" and "error" argument names (8d382cd)
- remove usage where deprecated (387db3b)
- remove unused dependencies and imports (fad4c9b)
- shared: fixes focus-visible types in test (0dc7d68)
- shared: further tweaks for test types (ee45173)
- slot documentation (0ebd260)
- update side effect listings (8160d3a)
- update to latest spectrum-css packages (a5ca19f)
- use icons without "size" values (3fc7c91)
- use latest @spectrum-css/* versions (c35eb86)
- action-menu: allow icon customization (cffd49a)
- action-menu: remove menu selection by default (54d636f)
- action-menu: update spectrum css input (62a5065)
- button: use synthetic button instead of native (49e94bc)
- card: upgrade to Spectrum CSS v3.0.0 (84cf1a9)
- dropdown: open menu UI with overlay system (9811eeb)
- include all Dev Mode files in side effects (f70817c)
- leverage "exports" field in package.json (321abd7)
- sets action-menu quiet to false by default, fixes #3040 (8414cab)
- shared pkg versions, devmode define warning, registry-conflicts docs (6e49565)
- support Spectrum Token consumption and update Action Button to use them (743ab16)
- tabs: add sp-tab-panel element (b17d276)
- track the associated Spectrum CSS package (86b1be5)
- use :focus-visable (via polyfill) instead of :focus (11c6fc7)
- use latest exports specification (a7ecf4b)
- use "sideEffects" listing in package.json (7271614)
- use imported TypeScript helpers instead of inlining them (cc2bd0a)
- Revert "chore: release new versions" (a6d655d)
Note: Version bump only for package @spectrum-web-components/action-menu
Note: Version bump only for package @spectrum-web-components/action-menu
- sets action-menu quiet to false by default, fixes #3040 (8414cab)
Note: Version bump only for package @spectrum-web-components/action-menu
Note: Version bump only for package @spectrum-web-components/action-menu
Note: Version bump only for package @spectrum-web-components/action-menu
Note: Version bump only for package @spectrum-web-components/action-menu
Note: Version bump only for package @spectrum-web-components/action-menu
Note: Version bump only for package @spectrum-web-components/action-menu
Note: Version bump only for package @spectrum-web-components/action-menu
Note: Version bump only for package @spectrum-web-components/action-menu
- ensure Action Menu Item with [href] close the menu (6b3d87f)
- menu: ensure that Groups in Action Menus are rendered with the correct width (a996a10)
Note: Version bump only for package @spectrum-web-components/action-menu
- action-menu: fix 2510, unable to control top-level action-menu selection (c9198c2)
- action-menu: never set item selected values when selects is undefined (5237fdb)
Note: Version bump only for package @spectrum-web-components/action-menu
Note: Version bump only for package @spectrum-web-components/action-menu
- include all Dev Mode files in side effects (f70817c)
- action-menu: stop stripping selected state from submenu items (968d1f2)
- support Spectrum Token consumption and update Action Button to use them (743ab16)
Note: Version bump only for package @spectrum-web-components/action-menu
Note: Version bump only for package @spectrum-web-components/action-menu
Note: Version bump only for package @spectrum-web-components/action-menu
Note: Version bump only for package @spectrum-web-components/action-menu
- remove unused dependencies and imports (fad4c9b)
Note: Version bump only for package @spectrum-web-components/action-menu
Note: Version bump only for package @spectrum-web-components/action-menu
Note: Version bump only for package @spectrum-web-components/action-menu
Note: Version bump only for package @spectrum-web-components/action-menu
Note: Version bump only for package @spectrum-web-components/action-menu
Note: Version bump only for package @spectrum-web-components/action-menu
Note: Version bump only for package @spectrum-web-components/action-menu
Note: Version bump only for package @spectrum-web-components/action-menu
Note: Version bump only for package @spectrum-web-components/action-menu
Note: Version bump only for package @spectrum-web-components/action-menu
Note: Version bump only for package @spectrum-web-components/action-menu
Note: Version bump only for package @spectrum-web-components/action-menu
- abstract "hasVisibleFocusInTree" functionality and return trigger focus after close (4f39f2c)
- track the associated Spectrum CSS package (86b1be5)
Note: Version bump only for package @spectrum-web-components/action-menu
Note: Version bump only for package @spectrum-web-components/action-menu
Note: Version bump only for package @spectrum-web-components/action-menu
Note: Version bump only for package @spectrum-web-components/action-menu
Note: Version bump only for package @spectrum-web-components/action-menu
Note: Version bump only for package @spectrum-web-components/action-menu
- expand sync offering for elements with overlay content (0195843)
- action-menu: remove menu selection by default (54d636f)
Note: Version bump only for package @spectrum-web-components/action-menu
Note: Version bump only for package @spectrum-web-components/action-menu
Note: Version bump only for package @spectrum-web-components/action-menu
Note: Version bump only for package @spectrum-web-components/action-menu
- tabs: add sp-tab-panel element (b17d276)
- action-menu: provide action menu size to action button (b963f57)
Note: Version bump only for package @spectrum-web-components/action-menu
Note: Version bump only for package @spectrum-web-components/action-menu
Note: Version bump only for package @spectrum-web-components/action-menu
Note: Version bump only for package @spectrum-web-components/action-menu
- analyze type errors, and add deprecated syntax tests (b7e67a1)
- missed ActionMenu for type changes (fa66d56)
- remove usage where deprecated (387db3b)
- slot documentation (0ebd260)
Note: Version bump only for package @spectrum-web-components/action-menu
- use latest exports specification (a7ecf4b)
- update to latest spectrum-css packages (a5ca19f)
Note: Version bump only for package @spectrum-web-components/action-menu
Note: Version bump only for package @spectrum-web-components/action-menu
- include the "types" entry in package.json files (b432f59)
- use icons without "size" values (3fc7c91)
- use latest @spectrum-css/* versions (c35eb86)
- action-menu: update spectrum css input (62a5065)
- button: use synthetic button instead of native (49e94bc)
- include the "types" entry in package.json files (b432f59)
- use icons without "size" values (3fc7c91)
- use latest @spectrum-css/* versions (c35eb86)
- action-menu: update spectrum css input (62a5065)
- button: use synthetic button instead of native (49e94bc)
Note: Version bump only for package @spectrum-web-components/action-menu
- include default export in the "exports" fields (f32407d)
- update side effect listings (8160d3a)
Note: Version bump only for package @spectrum-web-components/action-menu
Note: Version bump only for package @spectrum-web-components/action-menu
- code review feedback (23b84fc)
- css fixes for action-menu (8c804c8)
- card: upgrade to Spectrum CSS v3.0.0 (84cf1a9)
Note: Version bump only for package @spectrum-web-components/action-menu
Note: Version bump only for package @spectrum-web-components/action-menu
Note: Version bump only for package @spectrum-web-components/action-menu
Note: Version bump only for package @spectrum-web-components/action-menu
Note: Version bump only for package @spectrum-web-components/action-menu
Note: Version bump only for package @spectrum-web-components/action-menu
Note: Version bump only for package @spectrum-web-components/action-menu
- leverage "exports" field in package.json (321abd7)
Note: Version bump only for package @spectrum-web-components/action-menu
Note: Version bump only for package @spectrum-web-components/action-menu
Note: Version bump only for package @spectrum-web-components/action-menu
Note: Version bump only for package @spectrum-web-components/action-menu
Note: Version bump only for package @spectrum-web-components/action-menu
- use "sideEffects" listing in package.json (7271614)
Note: Version bump only for package @spectrum-web-components/action-menu
Note: Version bump only for package @spectrum-web-components/action-menu
Note: Version bump only for package @spectrum-web-components/action-menu
Note: Version bump only for package @spectrum-web-components/action-menu
- dropdown: open menu UI with overlay system (9811eeb)
Note: Version bump only for package @spectrum-web-components/action-menu
Note: Version bump only for package @spectrum-web-components/action-menu
- action-menu: spectrum adherence update (6eb1860)
Note: Version bump only for package @spectrum-web-components/action-menu
Note: Version bump only for package @spectrum-web-components/action-menu
Note: Version bump only for package @spectrum-web-components/action-menu
- normalize "event" and "error" argument names (8d382cd)
- include "type" in package.json, generate custom-elements.json (1a8d716)
- shared: fixes focus-visible types in test (0dc7d68)
- shared: further tweaks for test types (ee45173)
- use :focus-visable (via polyfill) instead of :focus (11c6fc7)
- action-menu: apply slot text observer pattern (bbe6bb5)
Note: Version bump only for package @spectrum-web-components/action-menu
- action-menu: call super.firstUpdated for focus control (88bad85)
- action-menu: allow icon customization (cffd49a)
- use imported TypeScript helpers instead of inlining them (cc2bd0a)
Note: Version bump only for package @spectrum-web-components/action-menu
An <sp-action-menu>
is an action button that triggers an overlay with <sp-menu-items>
for activation. Use an <sp-menu>
element to outline the items that will be made available to the user when interacting with the <sp-action-menu>
element. By default <sp-action-menu>
does not manage a selection. If you'd like for a selection to be held by the <sp-menu>
that is presented in its overlay, use selects="single"
to activate this functionality.

yarn add @spectrum-web-components/action-menu
Import the side effectful registration of <sp-action-menu>
via:
import '@spectrum-web-components/action-menu/sp-action-menu.js';
The default of <sp-action-menu>
will load dependencies in @spectrum-web-components/overlay
asynchronously via a dynamic import. In the case that you would like to import those tranverse dependencies statically, import the side effectful registration of <sp-action-menu>
as follows:
import '@spectrum-web-components/action-menu/sync/sp-action-menu.js';
When looking to leverage the ActionMenu
base class as a type and/or for extension purposes, do so via:
import { ActionMenu } from '@spectrum-web-components/action-menu';
Small <sp-action-menu size="s">
<span slot="label">More Actions</span>
<sp-menu-item>
Deselect
</sp-menu-item>
<sp-menu-item>
Select inverse
</sp-menu-item>
<sp-menu-item>
Feather...
</sp-menu-item>
<sp-menu-item>
Select and mask...
</sp-menu-item>
<sp-menu-divider></sp-menu-divider>
<sp-menu-item>
Save selection
</sp-menu-item>
<sp-menu-item disabled>
Make work path
</sp-menu-item>
</sp-action-menu>
Medium <sp-action-menu size="m">
<span slot="label">More Actions</span>
<sp-menu-item>
Deselect
</sp-menu-item>
<sp-menu-item>
Select inverse
</sp-menu-item>
<sp-menu-item>
Feather...
</sp-menu-item>
<sp-menu-item>
Select and mask...
</sp-menu-item>
<sp-menu-divider></sp-menu-divider>
<sp-menu-item>
Save selection
</sp-menu-item>
<sp-menu-item disabled>
Make work path
</sp-menu-item>
</sp-action-menu>
Large <sp-action-menu size="l">
<span slot="label">More Actions</span>
<sp-menu-item>
Deselect
</sp-menu-item>
<sp-menu-item>
Select inverse
</sp-menu-item>
<sp-menu-item>
Feather...
</sp-menu-item>
<sp-menu-item>
Select and mask...
</sp-menu-item>
<sp-menu-divider></sp-menu-divider>
<sp-menu-item>
Save selection
</sp-menu-item>
<sp-menu-item disabled>
Make work path
</sp-menu-item>
</sp-action-menu>
Extra Large <sp-action-menu size="xl">
<span slot="label">More Actions</span>
<sp-menu-item>
Deselect
</sp-menu-item>
<sp-menu-item>
Select inverse
</sp-menu-item>
<sp-menu-item>
Feather...
</sp-menu-item>
<sp-menu-item>
Select and mask...
</sp-menu-item>
<sp-menu-divider></sp-menu-divider>
<sp-menu-item>
Save selection
</sp-menu-item>
<sp-menu-item disabled>
Make work path
</sp-menu-item>
</sp-action-menu>
In order to deliver an <sp-action-menu>
without an icon, use the label-only
slot. This will supress any icon from being displayed, both the default ellipsis icon or any icon the user might provide to the element.
<sp-action-menu>
<span slot="label-only">More Actions</span>
<sp-menu-item>
Deselect
</sp-menu-item>
<sp-menu-item>
Select inverse
</sp-menu-item>
<sp-menu-item>
Feather...
</sp-menu-item>
<sp-menu-item>
Select and mask...
</sp-menu-item>
<sp-menu-divider></sp-menu-divider>
<sp-menu-item>
Save selection
</sp-menu-item>
<sp-menu-item disabled>
Make work path
</sp-menu-item>
</sp-action-menu>
The visible label that is be provided via the default <slot>
interface can be omitted in preference of an icon only interface. In this context be sure that the <sp-action-menu>
continued to be accessible to screen readers by applying the label
attribute. This will apply an aria-label
attribute of the same value to the <button>
element that toggles the menu list.
<sp-action-menu label="More Actions">
<sp-menu-item>
Deselect
</sp-menu-item>
<sp-menu-item>
Select inverse
</sp-menu-item>
<sp-menu-item>
Feather...
</sp-menu-item>
<sp-menu-item>
Select and mask...
</sp-menu-item>
<sp-menu-divider></sp-menu-divider>
<sp-menu-item>
Save selection
</sp-menu-item>
<sp-menu-item disabled>
Make work path
</sp-menu-item>
</sp-action-menu>
A custom icon can be supplied via the icon
slot in order to replace the default meatballs icon.
<sp-action-menu>
<sp-icon-settings slot="icon"></sp-icon-settings>
<span slot="label">Actions under the gear</span>
<sp-menu-item>
Deselect
</sp-menu-item>
<sp-menu-item>
Select inverse
</sp-menu-item>
<sp-menu-item>
Feather...
</sp-menu-item>
<sp-menu-item>
Select and mask...
</sp-menu-item>
<sp-menu-divider></sp-menu-divider>
<sp-menu-item>
Save selection
</sp-menu-item>
<sp-menu-item disabled>
Make work path
</sp-menu-item>
</sp-action-menu>
When selects
is set to single
, the <sp-action-menu>
element will maintain one selected item after an initial selection is made.
<p>
The value of the `<sp-action-menu>` element is:
<span id="single-value"></span>
</p>
<sp-action-menu
selects="single"
onchange="this.previousElementSibling.querySelector('#single-value').textContent=this.value"
>
<span slot="label">Available shapes</span>
<sp-menu-item value="shape-1-square">Square</sp-menu-item>
<sp-menu-item value="shape-2-triangle">Triangle</sp-menu-item>
<sp-menu-item value="shape-3-parallelogram">Parallelogram</sp-menu-item>
<sp-menu-item value="shape-4-star">Star</sp-menu-item>
<sp-menu-item value="shape-5-hexagon">Hexagon</sp-menu-item>
<sp-menu-item value="shape-6-circle" disabled>Circle</sp-menu-item>
</sp-action-menu>
On mobile, the menu can be exposed in either a sp-popover
or sp-tray
. By default, sp-action-menu
will render an sp-tray
. If you would like to render sp-popover
on mobile, add the attribute forcePopover
to the sp-action-menu
.
Usage Guidance:
- Use a tray when a menu’s proximity to its trigger is considered to be less important to the experience, or for showing a volume of content that is too overwhelming for a popover.
- Use a popover when a menu’s proximity to its trigger is considered to be important to the experience, or for showing a volume of content that is manageable for a popover.
To see this functionality in action, load this page from your mobile device or use Chrome DevTools (or equivalent) and select a mobile device once the Device Toolbar (the phone/tablet icon) is active.
<sp-action-menu forcePopover>
<span slot="label">Action Menu</span>
<sp-menu-item>Deselect</sp-menu-item>
<sp-menu-item>Select Inverse</sp-menu-item>
<sp-menu-item>Feather...</sp-menu-item>
<sp-menu-item>Select and Mask...</sp-menu-item>
<sp-menu-divider></sp-menu-divider>
<sp-menu-item>Save Selection</sp-menu-item>
<sp-menu-item disabled>Make Work Path</sp-menu-item>
</sp-action-menu>
Tooltip in action menu can be attached via adding <sp-tooltip>
and can be customized by using various parameters (e.g. placement, content, etc) as needed.
<sp-action-menu>
<sp-tooltip slot="tooltip" self-managed placement="bottom">
Content
</sp-tooltip>
<span slot="label">Available shapes</span>
<sp-menu-item value="shape-1-square">Square</sp-menu-item>
<sp-menu-item value="shape-2-triangle">Triangle</sp-menu-item>
<sp-menu-item value="shape-3-parallelogram">Parallelogram</sp-menu-item>
</sp-action-menu>
An <sp-action-menu>
parent will ensure that the internal <sp-menu>
features a role of listbox
and contains children with the role option
. Upon focusing the <sp-action-menu>
using ArrowDown
will also open the menu while throwing focus into first selected (or unselected when none are selected) menu item to assist in selecting of a new value.