sp-action-menu

NPM

1.1.2

Storybook

View Storybook

Try it on

webcomponents.dev

Examples

API

Changelog

Attributes and Properties #

Property

Attribute

Type

Default

Description

disabled

boolean

false

Disable this control. It will not receive focus or events

focused

boolean

false

icons

'only' | 'none' | undefined

invalid

boolean

false

label

string | undefined

open

boolean

false

pending

boolean

false

Whether the items are currently loading.

pendingLabel

pending-label

string

'Pending'

Defines a string value that labels the Picker while it is in pending state.

placement

"top" | "top-start" | "top-end" | "right" | "right-start" | "right-end" | "bottom" | "bottom-start" | "bottom-end" | "left" | "left-start" | "left-end"

'bottom-start'

quiet

boolean

false

readonly

boolean

false

selects

undefined | 'single'

undefined

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 it presents in its overlay, use `selects="single" to activate this functionality.

staticColor

static-color

'white' | 'black' | undefined

tabIndex

number

The tab index to apply to this control. See general documentation about the tabindex HTML property

value

string

''

Slots #

Name

Description

default slot

menu items to be listed in the Action Menu

icon

The icon to use for the Action Menu

label

The label to use for the Action Menu

label-only

The label to use for the Action Menu (no icon space reserved)

Events #

Name

Type

Description

change

Event

scroll

Event

1.1.2 (2025-02-12) #

Bug Fixes #

overlay: derive popover placement from host in interaction controller (#5078) (635cf53)

1.1.1 (2025-01-29) #

Note: Version bump only for package @spectrum-web-components/action-menu

1.1.0 (2025-01-29) #

Bug Fixes #

lock prerelease versions for Spectrum CSS (#5014) (8aa7734)
overlay: make :focus-visible consistent when using overlay type modal (#4912) (7a5f786), closes #5021

Features #

add an optional chromatic vrt action (7d2f840)
picker: add forcePopover property (#5041) (3651e57)

1.0.3 (2024-12-09) #

Note: Version bump only for package @spectrum-web-components/action-menu

1.0.1 (2024-11-11) #

Note: Version bump only for package @spectrum-web-components/action-menu

1.0.0 (2024-10-31) #

BREAKING CHANGES #

remove deprecated 'static' references (#4818)

0.49.0 (2024-10-15) #

Features #

add static-color to replace static (#4808) (43cf086)

0.48.1 (2024-10-01) #

Note: Version bump only for package @spectrum-web-components/action-menu

0.48.0 (2024-09-17) #

Bug Fixes #

action-menu: dispatch scroll event (#4715) (c76f3f5)
picker: added a custom class to make :focus-visible styles consistent across all browsers (#4724) (d667d08)

0.47.2 (2024-09-03) #

Note: Version bump only for package @spectrum-web-components/action-menu

0.47.1 (2024-08-27) #

Note: Version bump only for package @spectrum-web-components/action-menu

0.47.0 (2024-08-20) #

Features #

breadcrumbs: add Breadcrumbs component (#4578) (acd4b5e)

0.46.0 (2024-08-08) #

Note: Version bump only for package @spectrum-web-components/action-menu

0.45.0 (2024-07-30) #

Bug Fixes #

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

0.44.0 (2024-07-15) #

Note: Version bump only for package @spectrum-web-components/action-menu

0.43.0 (2024-06-11) #

Note: Version bump only for package @spectrum-web-components/action-menu

0.42.5 (2024-05-24) #

Note: Version bump only for package @spectrum-web-components/action-menu

0.42.4 (2024-05-14) #

Bug Fixes #

action-menu: allow menu groups to handle their own selections (#4397) (5a19051)

0.42.3 (2024-05-01) #

Note: Version bump only for package @spectrum-web-components/action-menu

0.42.2 (2024-04-03) #

Note: Version bump only for package @spectrum-web-components/action-menu

0.42.1 (2024-04-02) #

Note: Version bump only for package @spectrum-web-components/action-menu

0.42.0 (2024-03-19) #

Features #

asset: use core tokens (99e76f4)

0.41.2 (2024-03-05) #

Note: Version bump only for package @spectrum-web-components/action-menu

0.41.1 (2024-02-22) #

Note: Version bump only for package @spectrum-web-components/action-menu

0.41.0 (2024-02-13) #

Note: Version bump only for package @spectrum-web-components/action-menu

0.40.5 (2024-02-05) #

Note: Version bump only for package @spectrum-web-components/action-menu

0.40.4 (2024-01-29) #

Bug Fixes #

overlay: clean position data on close (edac590)
picker,action-menu,split-button: update interaction model (#3935) (bae7d52)

0.40.3 (2024-01-11) #

Bug Fixes #

overlay: move closed overlays to "display: none" (fc0278b)
picker: force close slotted Tooltip elements with disabled when Menu openes (82c8f12)

0.40.2 (2023-12-18) #

Bug Fixes #

menu: support navigating to and selecting Menu Items in Menu Groups (8469ab2)

0.40.1 (2023-12-05) #

Bug Fixes #

action-menu: allow tray to display full width (31415e4)

0.40.0 (2023-11-16) #

Note: Version bump only for package @spectrum-web-components/action-menu

0.39.4 (2023-11-02) #

Note: Version bump only for package @spectrum-web-components/action-menu

0.39.3 (2023-10-18) #

Note: Version bump only for package @spectrum-web-components/action-menu

0.39.2 (2023-10-13) #

Note: Version bump only for package @spectrum-web-components/action-menu

0.39.1 (2023-10-06) #

Bug Fixes #

menu: allow change events to be direct (#3689) (b2cd3da)

0.39.0 (2023-09-25) #

Bug Fixes #

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)

0.38.0 (2023-09-05) #

Bug Fixes #

action-menu,split-button: ensure toggling the Menu closed completes (2dd0f98)
action-menu: added static attribute support (#3573) (25889a8)

0.37.0 (2023-08-18) #

Features #

picker,action-group,split-button: leverage Overlay v2 (170a223)

Performance Improvements #

make lots of things lazy (b8fa3ad)

0.36.0 (2023-08-18) #

Bug Fixes #

action-menu: add a slot for Tooltip content (#3488) (23cef3a)

Features #

menu: convert to core tokens (#3254) (da43540)

0.35.0 (2023-07-31) #

Note: Version bump only for package @spectrum-web-components/action-menu

0.34.0 (2023-07-11) #

Bug Fixes #

action-button,action-menu,picker,split-button: expand and update application of aria-* attributes (52c0156)

0.33.2 (2023-06-14) #

Note: Version bump only for package @spectrum-web-components/action-menu

0.33.1 (2023-06-14) #

Note: Version bump only for package @spectrum-web-components/action-menu

0.33.0 (2023-06-08) #

Note: Version bump only for package @spectrum-web-components/action-menu

0.32.0 (2023-06-01) #

Note: Version bump only for package @spectrum-web-components/action-menu

0.31.0 (2023-05-17) #

Note: Version bump only for package @spectrum-web-components/action-menu

0.30.0 (2023-05-03) #

Bug Fixes #

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)

Features #

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)

Performance Improvements #

use "sideEffects" listing in package.json (7271614)
use imported TypeScript helpers instead of inlining them (cc2bd0a)

Reverts #

Revert "chore: release new versions" (a6d655d)

0.16.2 (2023-04-24) #

Note: Version bump only for package @spectrum-web-components/action-menu

0.16.1 (2023-04-05) #

Note: Version bump only for package @spectrum-web-components/action-menu

0.16.0 (2023-03-22) #

Features #

sets action-menu quiet to false by default, fixes #3040 (8414cab)

0.15.14 (2023-03-08) #

Note: Version bump only for package @spectrum-web-components/action-menu

0.15.13 (2023-02-13) #

Note: Version bump only for package @spectrum-web-components/action-menu

0.15.12 (2023-02-08) #

Note: Version bump only for package @spectrum-web-components/action-menu

0.15.11 (2023-01-23) #

Note: Version bump only for package @spectrum-web-components/action-menu

0.15.10 (2023-01-09) #

Note: Version bump only for package @spectrum-web-components/action-menu

0.15.9 (2022-12-08) #

Note: Version bump only for package @spectrum-web-components/action-menu

0.15.8 (2022-11-21) #

Note: Version bump only for package @spectrum-web-components/action-menu

0.15.7 (2022-11-14) #

Note: Version bump only for package @spectrum-web-components/action-menu

0.15.6 (2022-10-28) #

Bug Fixes #

ensure Action Menu Item with [href] close the menu (6b3d87f)

0.15.5 (2022-10-17) #

Bug Fixes #

menu: ensure that Groups in Action Menus are rendered with the correct width (a996a10)

0.15.4 (2022-10-10) #

Note: Version bump only for package @spectrum-web-components/action-menu

0.15.3 (2022-09-15) #

Bug Fixes #

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)

0.15.2 (2022-09-14) #

Note: Version bump only for package @spectrum-web-components/action-menu

0.15.1 (2022-08-24) #

Note: Version bump only for package @spectrum-web-components/action-menu

0.15.0 (2022-08-09) #

Features #

include all Dev Mode files in side effects (f70817c)

0.14.1 (2022-08-04) #

Bug Fixes #

action-menu: stop stripping selected state from submenu items (968d1f2)

0.14.0 (2022-07-18) #

Features #

support Spectrum Token consumption and update Action Button to use them (743ab16)

0.13.16 (2022-06-29) #

Note: Version bump only for package @spectrum-web-components/action-menu

0.13.15 (2022-06-07) #

Note: Version bump only for package @spectrum-web-components/action-menu

0.13.14 (2022-05-27) #

Note: Version bump only for package @spectrum-web-components/action-menu

0.13.13 (2022-05-12) #

Note: Version bump only for package @spectrum-web-components/action-menu

0.13.12 (2022-04-21) #

Bug Fixes #

remove unused dependencies and imports (fad4c9b)

0.13.11 (2022-03-30) #

Note: Version bump only for package @spectrum-web-components/action-menu

0.13.10 (2022-03-08) #

Note: Version bump only for package @spectrum-web-components/action-menu

0.13.9 (2022-03-08) #

Note: Version bump only for package @spectrum-web-components/action-menu

0.13.8 (2022-03-04) #

Note: Version bump only for package @spectrum-web-components/action-menu

0.13.7 (2022-02-22) #

Note: Version bump only for package @spectrum-web-components/action-menu

0.13.6 (2022-02-03) #

Note: Version bump only for package @spectrum-web-components/action-menu

0.13.5 (2022-02-02) #

Note: Version bump only for package @spectrum-web-components/action-menu

0.13.4 (2022-01-26) #

Note: Version bump only for package @spectrum-web-components/action-menu

0.13.3 (2022-01-26) #

Note: Version bump only for package @spectrum-web-components/action-menu

0.13.2 (2022-01-07) #

Note: Version bump only for package @spectrum-web-components/action-menu

0.13.1 (2021-12-13) #

Note: Version bump only for package @spectrum-web-components/action-menu

0.13.0 (2021-11-08) #

Note: Version bump only for package @spectrum-web-components/action-menu

0.12.1 (2021-11-08) #

Bug Fixes #

abstract "hasVisibleFocusInTree" functionality and return trigger focus after close (4f39f2c)

0.12.0 (2021-11-02) #

Features #

track the associated Spectrum CSS package (86b1be5)

0.11.6 (2021-10-12) #

Note: Version bump only for package @spectrum-web-components/action-menu

0.11.5 (2021-10-05) #

Note: Version bump only for package @spectrum-web-components/action-menu

0.11.4 (2021-09-20) #

Note: Version bump only for package @spectrum-web-components/action-menu

0.11.3 (2021-09-13) #

Note: Version bump only for package @spectrum-web-components/action-menu

0.11.2 (2021-08-24) #

Note: Version bump only for package @spectrum-web-components/action-menu

0.11.1 (2021-08-17) #

Note: Version bump only for package @spectrum-web-components/action-menu

0.11.0 (2021-08-03) #

Bug Fixes #

expand sync offering for elements with overlay content (0195843)

Features #

action-menu: remove menu selection by default (54d636f)

0.10.4 (2021-07-22) #

Note: Version bump only for package @spectrum-web-components/action-menu

0.10.3 (2021-07-01) #

Note: Version bump only for package @spectrum-web-components/action-menu

0.10.2 (2021-06-16) #

Note: Version bump only for package @spectrum-web-components/action-menu

0.10.1 (2021-06-07) #

Note: Version bump only for package @spectrum-web-components/action-menu

0.10.0 (2021-05-24) #

Features #

tabs: add sp-tab-panel element (b17d276)

0.9.7 (2021-05-12) #

Bug Fixes #

action-menu: provide action menu size to action button (b963f57)

0.9.6 (2021-04-15) #

Note: Version bump only for package @spectrum-web-components/action-menu

0.9.5 (2021-04-09) #

Note: Version bump only for package @spectrum-web-components/action-menu

0.9.4 (2021-03-29) #

Note: Version bump only for package @spectrum-web-components/action-menu

0.9.3 (2021-03-22) #

Note: Version bump only for package @spectrum-web-components/action-menu

0.9.2 (2021-03-22) #

Bug Fixes #

analyze type errors, and add deprecated syntax tests (b7e67a1)
missed ActionMenu for type changes (fa66d56)
remove usage where deprecated (387db3b)
slot documentation (0ebd260)

0.9.1 (2021-03-05) #

Note: Version bump only for package @spectrum-web-components/action-menu

0.9.0 (2021-03-04) #

Features #

use latest exports specification (a7ecf4b)

0.8.3 (2021-02-11) #

Bug Fixes #

update to latest spectrum-css packages (a5ca19f)

0.8.2 (2021-02-02) #

Note: Version bump only for package @spectrum-web-components/action-menu

0.8.1 (2021-01-28) #

Note: Version bump only for package @spectrum-web-components/action-menu

0.8.0 (2021-01-21) #

Bug Fixes #

include the "types" entry in package.json files (b432f59)
use icons without "size" values (3fc7c91)
use latest @spectrum-css/* versions (c35eb86)

Features #

action-menu: update spectrum css input (62a5065)
button: use synthetic button instead of native (49e94bc)

0.7.0 (2021-01-13) #

Bug Fixes #

include the "types" entry in package.json files (b432f59)
use icons without "size" values (3fc7c91)
use latest @spectrum-css/* versions (c35eb86)

Features #

action-menu: update spectrum css input (62a5065)
button: use synthetic button instead of native (49e94bc)

0.6.5 (2020-10-12) #

Note: Version bump only for package @spectrum-web-components/action-menu

0.6.4 (2020-10-12) #

Bug Fixes #

include default export in the "exports" fields (f32407d)

0.6.3 (2020-09-25) #

Bug Fixes #

update side effect listings (8160d3a)

0.6.2 (2020-09-15) #

Note: Version bump only for package @spectrum-web-components/action-menu

0.6.1 (2020-09-14) #

Note: Version bump only for package @spectrum-web-components/action-menu

0.6.0 (2020-08-31) #

Bug Fixes #

code review feedback (23b84fc)
css fixes for action-menu (8c804c8)

Features #

card: upgrade to Spectrum CSS v3.0.0 (84cf1a9)

0.5.7 (2020-08-19) #

Note: Version bump only for package @spectrum-web-components/action-menu

0.5.6 (2020-08-13) #

Note: Version bump only for package @spectrum-web-components/action-menu

0.5.5 (2020-08-13) #

Note: Version bump only for package @spectrum-web-components/action-menu

0.5.4 (2020-08-05) #

Note: Version bump only for package @spectrum-web-components/action-menu

0.5.3 (2020-07-27) #

Note: Version bump only for package @spectrum-web-components/action-menu

0.5.2 (2020-07-24) #

Note: Version bump only for package @spectrum-web-components/action-menu

0.5.1 (2020-07-22) #

Note: Version bump only for package @spectrum-web-components/action-menu

0.5.0 (2020-07-17) #

Features #

leverage "exports" field in package.json (321abd7)

0.4.10 (2020-06-08) #

Note: Version bump only for package @spectrum-web-components/action-menu

0.4.9 (2020-05-12) #

Note: Version bump only for package @spectrum-web-components/action-menu

0.4.8 (2020-05-08) #

Note: Version bump only for package @spectrum-web-components/action-menu

0.4.7 (2020-05-08) #

Note: Version bump only for package @spectrum-web-components/action-menu

0.4.6 (2020-04-21) #

Note: Version bump only for package @spectrum-web-components/action-menu

0.4.5 (2020-04-16) #

Performance Improvements #

use "sideEffects" listing in package.json (7271614)

0.4.4 (2020-04-10) #

Note: Version bump only for package @spectrum-web-components/action-menu

0.4.3 (2020-04-07) #

Note: Version bump only for package @spectrum-web-components/action-menu

0.4.2 (2020-03-16) #

Note: Version bump only for package @spectrum-web-components/action-menu

0.4.1 (2020-03-11) #

Note: Version bump only for package @spectrum-web-components/action-menu

0.4.0 (2020-02-24) #

Features #

dropdown: open menu UI with overlay system (9811eeb)

0.3.8 (2020-02-05) #

Note: Version bump only for package @spectrum-web-components/action-menu

0.3.7 (2020-02-01) #

Note: Version bump only for package @spectrum-web-components/action-menu

0.3.6 (2020-01-30) #

Bug Fixes #

action-menu: spectrum adherence update (6eb1860)

0.3.5 (2020-01-06) #

Note: Version bump only for package @spectrum-web-components/action-menu

0.3.4 (2019-12-12) #

Note: Version bump only for package @spectrum-web-components/action-menu

0.3.3 (2019-12-09) #

Note: Version bump only for package @spectrum-web-components/action-menu

0.3.2 (2019-12-02) #

Bug Fixes #

normalize "event" and "error" argument names (8d382cd)

0.3.1 (2019-11-27) #

Bug Fixes #

include "type" in package.json, generate custom-elements.json (1a8d716)

0.3.0 (2019-11-19) #

Bug Fixes #

shared: fixes focus-visible types in test (0dc7d68)
shared: further tweaks for test types (ee45173)

Features #

use :focus-visable (via polyfill) instead of :focus (11c6fc7)

0.2.2 (2019-11-01) #

Bug Fixes #

action-menu: apply slot text observer pattern (bbe6bb5)

0.2.1 (2019-10-16) #

Note: Version bump only for package @spectrum-web-components/action-menu

0.2.0 (2019-10-14) #

Bug Fixes #

action-menu: call super.firstUpdated for focus control (88bad85)

Features #

action-menu: allow icon customization (cffd49a)

Performance Improvements #

use imported TypeScript helpers instead of inlining them (cc2bd0a)

0.1.3 (2019-10-03) #

Note: Version bump only for package @spectrum-web-components/action-menu

Description #

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.

Usage #

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';

Sizes #

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>

Variants #

No icon #

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>

No visible label #

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>

Alternate icon #

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>

Selection #

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 `&lt;sp-action-menu&gt;` 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>

Accessibility #

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.

Spectrum Web Components

sp-action-menu

NPM

1.1.2

Storybook

View Storybook

Try it on

webcomponents.dev

Attributes and Properties #

Slots #

Events #

1.1.2 (2025-02-12) #

Bug Fixes #

1.1.1 (2025-01-29) #

1.1.0 (2025-01-29) #

Bug Fixes #

Features #

1.0.3 (2024-12-09) #

1.0.1 (2024-11-11) #

1.0.0 (2024-10-31) #

BREAKING CHANGES #

0.49.0 (2024-10-15) #

Features #

0.48.1 (2024-10-01) #

0.48.0 (2024-09-17) #

Bug Fixes #

0.47.2 (2024-09-03) #

0.47.1 (2024-08-27) #

0.47.0 (2024-08-20) #

Features #

0.46.0 (2024-08-08) #

0.45.0 (2024-07-30) #

Bug Fixes #

0.44.0 (2024-07-15) #

0.43.0 (2024-06-11) #

0.42.5 (2024-05-24) #

0.42.4 (2024-05-14) #

Bug Fixes #

0.42.3 (2024-05-01) #

0.42.2 (2024-04-03) #

0.42.1 (2024-04-02) #

0.42.0 (2024-03-19) #

Features #

0.41.2 (2024-03-05) #

0.41.1 (2024-02-22) #

0.41.0 (2024-02-13) #

0.40.5 (2024-02-05) #

0.40.4 (2024-01-29) #

Bug Fixes #

0.40.3 (2024-01-11) #

Bug Fixes #

0.40.2 (2023-12-18) #

Bug Fixes #

0.40.1 (2023-12-05) #

Bug Fixes #

0.40.0 (2023-11-16) #

0.39.4 (2023-11-02) #

0.39.3 (2023-10-18) #

0.39.2 (2023-10-13) #

0.39.1 (2023-10-06) #

Bug Fixes #

0.39.0 (2023-09-25) #

Bug Fixes #

0.38.0 (2023-09-05) #

Bug Fixes #

0.37.0 (2023-08-18) #

Features #

Performance Improvements #

0.36.0 (2023-08-18) #

Bug Fixes #

Features #

0.35.0 (2023-07-31) #

0.34.0 (2023-07-11) #

Bug Fixes #

0.33.2 (2023-06-14) #

0.33.1 (2023-06-14) #

0.33.0 (2023-06-08) #

0.32.0 (2023-06-01) #

0.31.0 (2023-05-17) #

0.30.0 (2023-05-03) #

Spectrum
Web Components