sp-menu

NPM

1.1.2

Storybook

View Storybook

Try it on

webcomponents.dev

Examples

API

Changelog

Attributes and Properties #

Property

Attribute

Type

Default

Description

ignore

boolean

false

label

string

''

selects

undefined | 'inherit' | 'single' | 'multiple'

whether the element has a specific selection algorithm that it applies to its item descendants. `single` allows only one descendent to be selected at a time. `multiple` allows many descendants to be selected. `inherit` will be applied dynamically when an ancestor of this element is actively managing the selection of its descendents. When the `selects` attribute is not present a `value` will not be maintained and the Menu Item children of this Menu will not have their `selected` state managed.

value

string

''

valueSeparator

value-separator

string

','

Slots #

Name

Description

default slot

menu items to be listed in the menu

Events #

Name

Type

Description

change

Event

Announces that the `value` of the element has changed

close

Event

1.1.2 (2025-02-12) #

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

1.1.1 (2025-01-29) #

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

1.1.0 (2025-01-29) #

Bug Fixes #

lock prerelease versions for Spectrum CSS (#5014) (8aa7734)

Features #

add an optional chromatic vrt action (7d2f840)

1.0.3 (2024-12-09) #

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

1.0.1 (2024-11-11) #

Bug Fixes #

menu: prevent sp-menu-item text-align cascading (#4868) (6663820)

1.0.0 (2024-10-31) #

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

0.49.0 (2024-10-15) #

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

0.48.1 (2024-10-01) #

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

0.48.0 (2024-09-17) #

Bug Fixes #

menu: allow menu-item to support arbitrary element as the submenu root (#4720) (4c6a0dc)

0.47.2 (2024-09-03) #

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

0.47.1 (2024-08-27) #

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

0.47.0 (2024-08-20) #

Features #

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

0.46.0 (2024-08-08) #

Bug Fixes #

menu: should not make a selection on right click (#4642) (d269629)

Features #

upgrade menu and dialog grid css (#4638) (ab9d468)

0.45.0 (2024-07-30) #

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

0.44.0 (2024-07-15) #

Features #

action-bar: support for action-menus (#3780) (4aff599)

0.43.0 (2024-06-11) #

Bug Fixes #

menu: enable numpad arrow and Enter keys (#4492) (012c411)

0.42.5 (2024-05-24) #

Note: Version bump only for package @spectrum-web-components/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/menu

0.42.2 (2024-04-03) #

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

0.42.1 (2024-04-02) #

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

0.42.0 (2024-03-19) #

Bug Fixes #

menu: release synthetic "click" promise to unblock keyboard interactions (f8aecf3)

Features #

asset: use core tokens (99e76f4)

0.41.2 (2024-03-05) #

Bug Fixes #

menu: fix css for disabled "value" slots in menu items (#4113) (3c5855d)

0.41.1 (2024-02-22) #

Bug Fixes #

menu: correct disabled menu item's chevron to appropriate colour (#4052) (30f5bb5)

0.41.0 (2024-02-13) #

Bug Fixes #

support generating random IDs outside of secure contexts (485a67c)

0.40.5 (2024-02-05) #

Bug Fixes #

menu: process ":active" styles (7917583)

0.40.4 (2024-01-29) #

Bug Fixes #

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)

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) #

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

0.40.0 (2023-11-16) #

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

0.39.4 (2023-11-02) #

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

0.39.3 (2023-10-18) #

Bug Fixes #

update deps graph, fix imports (f633005)

0.39.2 (2023-10-13) #

Bug Fixes #

menu: conditionally access slots for their assigned content (#3717) (c045822)

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 #

menu: allow Menu elements to be controlled (74ed7fb)
menu: manage deeply slotted menu items and initial focus (7f9ad69)

0.38.0 (2023-09-05) #

Bug Fixes #

menu: added support for menu item description (#3559) (ce99528)
menu: correct types import for .d.ts file creation (a11d264)

0.37.0 (2023-08-18) #

Bug Fixes #

ensure submenus stay open when root it clicked again (83ced1c)

Features #

menu: prepare for Overlay v2 and less connnected/disconnected responsibilities (5dfb71e)

Performance Improvements #

make lots of things lazy (b8fa3ad)
make submenus lazier (a2d661c)
make submenus lazy (93531b9)

0.36.0 (2023-08-18) #

Features #

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

0.35.0 (2023-07-31) #

Bug Fixes #

menu item missing aria labels (#3417) (0d04869)

0.34.0 (2023-07-11) #

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

0.33.2 (2023-06-14) #

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

0.33.1 (2023-06-14) #

Bug Fixes #

menu: #3164 plug memory leak with gobal events (ff589d4)

0.33.0 (2023-06-08) #

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

0.32.0 (2023-06-01) #

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

0.31.0 (2023-05-17) #

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

0.30.0 (2023-05-03) #

Bug Fixes #

abstract "hasVisibleFocusInTree" functionality and return trigger focus after close (4f39f2c)
add "value" slot to sp-menu-item (e1bd264)
add icon present and icon-only support to Picker (f6887a3)
add value/selection checks to the tests and fix up the value logic (933106f)
address a11y issues raised by updating our dependencies (4f06477)
correct @element jsDoc listing across library (c97a632)
correctly delivery visuals and mouse interactions for litAnchor and extensions (0ae889a)
dropdown: improve accessibility (389d9d9)
ensure Action Menu Item with [href] close the menu (6b3d87f)
ensure browser understandable extensions (f4e59f7)
ensure that an overlay can be released even if it does not complete its fade in animation (4cbb36f)
ensure that entering an ancestor Menu Item without a submen closes related submenus (efe5fa1)
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)
match "pointerup" listeners with "pointercancel" for full coverage (7f2ce92)
menu: add support for submenu interactions (68399af)
menu: allow for settign "selected" async from above (9d7f622)
menu: cache item parent element to correct disconnecting event dispatch (f375510)
menu: clarify menu internal focus management via preventScroll option (9ae092c)
menu: disabled menu-item should not open submenu (33848bc)
menu: ensure active descendant is in view when activated (6edc351)
menu: ensure that Groups in Action Menus are rendered with the correct width (a996a10)
menu: include all direct dependencies (aa7327f)
menu: manage tabindex and focus entry correctly (3b1a250)
menu: only scrollIntoView when keyboard navigating (f4e9278)
menu: pass current focus visibility to menu items (2d3bf80)
menu: patch undefined lastFocusedItem (772a7ea)
menu: prevent infinite loop when focus() (e4e98a3)
menu: support menu item list change in deep decendents (b2b47f3)
normalize "event" and "error" argument names (8d382cd)
picker: allow menu items to be added, updated, and removed (73511ba)
prepare for querying child items while disconnected (f4152a5)
prevent infinite loops when all children are [disabled] (2deac3d)
prevent leaving multiple submenus open at a time (d2bfbb2)
remove usage where deprecated (387db3b)
simplify focus application in Menu (6140169)
split-button: hide "selected" item from menu (322a966)
stop merging selectors in a way that alters the cascade (369388f)
style clean up (49e1537)
update consumption of Spectrum CSS for latest version (ed2305b)
update latest Spectrum CSS beta releases (d8d3acc)
update Picker label via MutationObserver instead of "slotchange" (196998e)
update role application logic to not overwrite menu* roles (94b6aec)
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-button: add action button pattern (03ac00a)
action-group: manage "one" and "multiple" selections (6fad59e)
add screenshot regression testing to CI (8205dfe)
add selects attribute to menu (bdf2578)
adopt DNA@7 base Spectrum CSS (e08cafd)
allow dir management by sp-theme elements (2d10158)
conditionally load focus-visible polyfill (6b5e5cf)
delivery dev mode messages in various packages (62370a1)
icons-workflow: vend fully registered icon components (941f3a4)
include all Dev Mode files in side effects (f70817c)
leverage "exports" field in package.json (321abd7)
menu: update spectrum css input (8c7e18a)
overlay: manage focus throwing and tab trapping (27a0b53)
picker: process field-label content for more accurate a11y tree (dc9df54)
picker: support responsive delivery of menu (20031d1)
reparentChildren - refactored arguments - breaking change (dea2bc5)
shared pkg versions, devmode define warning, registry-conflicts docs (6e49565)
split-button: add split-button pattern (4833a59)
update lit-* dependencies, wip (377f3c8)
update Menu Divider for new Spectrum CSS output (aca7e2d)
update to Spectrum CSS v3.0.0 (e8b3d8f)
use :focus-visable (via polyfill) instead of :focus (11c6fc7)
use @adobe/spectrum-css@2.15.1 (3918888)
use latest exports specification (a7ecf4b)

Performance Improvements #

reorganize inheritance and composition in Menu Items (d96ccb6)
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.17 (2023-04-24) #

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

0.16.16 (2023-04-05) #

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

0.16.15 (2023-03-22) #

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

0.16.14 (2023-03-08) #

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

0.16.13 (2023-02-13) #

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

0.16.12 (2023-02-08) #

Bug Fixes #

menu: patch undefined lastFocusedItem (772a7ea)
prepare for querying child items while disconnected (f4152a5)

0.16.11 (2023-01-23) #

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

0.16.10 (2023-01-09) #

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

0.16.9 (2022-12-08) #

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

0.16.8 (2022-11-21) #

Bug Fixes #

ensure that an overlay can be released even if it does not complete its fade in animation (4cbb36f)

0.16.7 (2022-11-14) #

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

0.16.6 (2022-10-28) #

Bug Fixes #

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

0.16.5 (2022-10-17) #

Bug Fixes #

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

0.16.4 (2022-10-10) #

Bug Fixes #

match "pointerup" listeners with "pointercancel" for full coverage (7f2ce92)

0.16.3 (2022-09-15) #

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

0.16.2 (2022-09-14) #

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

0.16.1 (2022-08-24) #

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

0.16.0 (2022-08-09) #

Features #

include all Dev Mode files in side effects (f70817c)

0.15.0 (2022-08-04) #

Features #

delivery dev mode messages in various packages (62370a1)

0.14.4 (2022-07-18) #

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

0.14.3 (2022-06-29) #

Bug Fixes #

ensure that entering an ancestor Menu Item without a submen closes related submenus (efe5fa1)
update Picker label via MutationObserver instead of "slotchange" (196998e)

0.14.2 (2022-06-07) #

Bug Fixes #

prevent leaving multiple submenus open at a time (d2bfbb2)
menu: disabled menu-item should not open submenu (33848bc)

0.14.1 (2022-05-27) #

Bug Fixes #

update consumption of Spectrum CSS for latest version (ed2305b)

0.14.0 (2022-05-12) #

Features #

update Menu Divider for new Spectrum CSS output (aca7e2d)

0.13.0 (2022-04-21) #

Features #

conditionally load focus-visible polyfill (6b5e5cf)
reparentChildren - refactored arguments - breaking change (dea2bc5)

0.12.5 (2022-03-30) #

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

0.12.4 (2022-03-08) #

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

0.12.3 (2022-03-08) #

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

0.12.2 (2022-03-04) #

Bug Fixes #

menu: add support for submenu interactions (68399af)

0.12.1 (2022-02-22) #

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

0.12.0 (2022-02-02) #

Features #

picker: support responsive delivery of menu (20031d1)

0.11.3 (2022-01-26) #

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

0.11.2 (2022-01-07) #

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

0.11.1 (2021-12-13) #

Bug Fixes #

picker: allow menu items to be added, updated, and removed (73511ba)

0.11.0 (2021-11-08) #

Features #

update lit-* dependencies, wip (377f3c8)

0.10.1 (2021-11-08) #

Bug Fixes #

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

0.10.0 (2021-11-02) #

Features #

adopt DNA@7 base Spectrum CSS (e08cafd)

0.9.6 (2021-10-12) #

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

0.9.5 (2021-10-05) #

Bug Fixes #

menu: cache item parent element to correct disconnecting event dispatch (f375510)

0.9.4 (2021-09-20) #

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

0.9.3 (2021-09-13) #

Bug Fixes #

simplify focus application in Menu (6140169)

0.9.2 (2021-08-24) #

Bug Fixes #

correct @element jsDoc listing across library (c97a632)

0.9.1 (2021-08-17) #

Performance Improvements #

reorganize inheritance and composition in Menu Items (d96ccb6)

0.9.0 (2021-08-03) #

Bug Fixes #

add value/selection checks to the tests and fix up the value logic (933106f)
split-button: hide "selected" item from menu (322a966)

Features #

add selects attribute to menu (bdf2578)

0.8.10 (2021-07-22) #

Bug Fixes #

style clean up (49e1537)

0.8.9 (2021-07-01) #

Bug Fixes #

add "value" slot to sp-menu-item (e1bd264)
add icon present and icon-only support to Picker (f6887a3)

0.8.8 (2021-06-16) #

Bug Fixes #

update role application logic to not overwrite menu* roles (94b6aec)

0.8.7 (2021-06-07) #

Bug Fixes #

menu: clarify menu internal focus management via preventScroll option (9ae092c)

0.8.6 (2021-05-24) #

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

0.8.5 (2021-05-12) #

Bug Fixes #

menu: pass current focus visibility to menu items (2d3bf80)

0.8.4 (2021-04-15) #

Bug Fixes #

menu: manage tabindex and focus entry correctly (3b1a250)
menu: only scrollIntoView when keyboard navigating (f4e9278)

0.8.3 (2021-04-09) #

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

0.8.2 (2021-03-29) #

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

0.8.1 (2021-03-22) #

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

0.8.0 (2021-03-22) #

Bug Fixes #

correctly delivery visuals and mouse interactions for litAnchor and extensions (0ae889a)
remove usage where deprecated (387db3b)

Features #

picker: process field-label content for more accurate a11y tree (dc9df54)

0.7.1 (2021-03-05) #

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

0.7.0 (2021-03-04) #

Bug Fixes #

menu: ensure active descendant is in view when activated (6edc351)

Features #

use latest exports specification (a7ecf4b)

0.6.3 (2021-02-11) #

Bug Fixes #

update to latest spectrum-css packages (a5ca19f)

0.6.2 (2021-02-02) #

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

0.6.1 (2021-01-28) #

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

0.6.0 (2021-01-21) #

Bug Fixes #

address a11y issues raised by updating our dependencies (4f06477)
include the "types" entry in package.json files (b432f59)
prevent infinite loops when all children are [disabled] (2deac3d)
stop merging selectors in a way that alters the cascade (369388f)
use icons without "size" values (3fc7c91)
menu: prevent infinite loop when focus() (e4e98a3)
update latest Spectrum CSS beta releases (d8d3acc)
use latest @spectrum-css/* versions (c35eb86)

Features #

action-button: add action button pattern (03ac00a)
action-group: manage "one" and "multiple" selections (6fad59e)
icons-workflow: vend fully registered icon components (941f3a4)
menu: update spectrum css input (8c7e18a)

0.5.0 (2021-01-13) #

Bug Fixes #

include the "types" entry in package.json files (b432f59)
prevent infinite loops when all children are disabled
stop merging selectors in a way that alters the cascade (369388f)
use icons without "size" values (3fc7c91)
menu: prevent infinite loop when focus() (e4e98a3)
update latest Spectrum CSS beta releases (d8d3acc)
use latest @spectrum-css/* versions (c35eb86)

Features #

action-button: add action button pattern (03ac00a)
action-group: manage "one" and "multiple" selections (6fad59e)
icons-workflow: vend fully registered icon components (941f3a4)
menu: update spectrum css input (8c7e18a)

0.4.4 (2020-10-12) #

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

0.4.3 (2020-10-12) #

Bug Fixes #

include default export in the "exports" fields (f32407d)
dropdown: improve accessibility (389d9d9)

0.4.2 (2020-09-25) #

Bug Fixes #

update side effect listings (8160d3a)

0.4.1 (2020-09-14) #

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

0.4.0 (2020-08-31) #

Features #

allow dir management by sp-theme elements (2d10158)
update to Spectrum CSS v3.0.0 (e8b3d8f)
split-button: add split-button pattern (4833a59)

0.3.2 (2020-08-19) #

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

0.3.1 (2020-08-13) #

Bug Fixes #

menu: include all direct dependencies (aa7327f)
ensure browser understandable extensions (f4e59f7)

0.3.0 (2020-07-17) #

Features #

overlay: manage focus throwing and tab trapping (27a0b53)
leverage "exports" field in package.json (321abd7)

0.2.7 (2020-06-08) #

Bug Fixes #

menu: support menu item list change in deep decendents (b2b47f3)

0.2.6 (2020-04-16) #

Performance Improvements #

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

0.2.5 (2020-04-07) #

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

0.2.4 (2020-03-11) #

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

0.2.3 (2020-01-06) #

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

0.2.2 (2019-12-02) #

Bug Fixes #

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

0.2.1 (2019-11-27) #

Bug Fixes #

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

0.2.0 (2019-11-19) #

Bug Fixes #

menu: allow for settign "selected" async from above (9d7f622)

Features #

add screenshot regression testing to CI (8205dfe)
use :focus-visable (via polyfill) instead of :focus (11c6fc7)
use @adobe/spectrum-css@2.15.1 (3918888)

0.1.4 (2019-10-14) #

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/menu

Description #

An <sp-menu> is used for creating a menu list. The various elements inside a menu are given as <sp-menu-group>, <sp-menu-item>, or <sp-menu-divider>. Often a <sp-menu> element will appear in a <sp-popover> element so that it displays as a togglig menu.

Usage #

yarn add @spectrum-web-components/menu

Import the side effectful registration of <sp-menu>, <sp-menu-group>, <sp-menu-item>, or <sp-menu-divider> individually as follows:

import '@spectrum-web-components/menu/sp-menu.js';
import '@spectrum-web-components/menu/sp-menu-group.js';
import '@spectrum-web-components/menu/sp-menu-item.js';
import '@spectrum-web-components/menu/sp-menu-divider.js';

When looking to leverage the Menu, MenuGroup, MenuItem, or MenuDivider base classes as a type and/or for extension purposes, do so via:

import {
    Menu,
    MenuGroup,
    MenuItem,
    MenuDivider
} from '@spectrum-web-components/menu';

Example #

<sp-menu>
    <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-item>
        Save selection
    </sp-menu-item>
    <sp-menu-item disabled>
        Make work path
    </sp-menu-item>
</sp-menu>

Often an <sp-menu> element will be delivered inside of an <sp-popover> element when displaying it above other content.

<sp-popover open style="position: relative">
    <sp-menu>
        <sp-menu-item value="item-1">Deselect</sp-menu-item>
        <sp-menu-item value="item-2">Select inverse</sp-menu-item>
        <sp-menu-item value="item-3">Feather...</sp-menu-item>
        <sp-menu-item value="item-4">Select and mask...</sp-menu-item>
        <sp-menu-item value="item-5">Save selection</sp-menu-item>
        <sp-menu-item value="item-6" disabled>Make work path</sp-menu-item>
    </sp-menu>
</sp-popover>

Managing a selection #

The <sp-menu> element can be instructed to maintain a selection via the selects attribute. Depending on the chosen algorithm, the <sp-menu> element will hold a value property and manage the selected state of its <sp-menu-item> descendants.

selects="single" #

When selects is set to single, the <sp-menu> element will maintain one selected item after an initial selection is made.

<p>
    The value of the `&lt;sp-menu&gt;` element is:
    <span id="single-value"></span>
</p>
<sp-menu
    label="Choose a shape"
    selects="single"
    onchange="this.previousElementSibling.querySelector('#single-value').textContent=this.value"
>
    <sp-menu-item value="item-1">Square</sp-menu-item>
    <sp-menu-item value="item-2">Triangle</sp-menu-item>
    <sp-menu-item value="item-3">Parallelogram</sp-menu-item>
    <sp-menu-item value="item-4">Star</sp-menu-item>
    <sp-menu-item value="item-5">Hexagon</sp-menu-item>
    <sp-menu-item value="item-6" disabled>Circle</sp-menu-item>
</sp-menu>

selects="multiple" #

When selects is set to multiple, the <sp-menu> element will maintain zero or more selected items.

<p>
    The value of the `&lt;sp-menu&gt;` element is:
    <span id="multiple-value">item-3,item-4</span>
</p>
<sp-menu
    label="Choose some fruit"
    selects="multiple"
    onchange="this.previousElementSibling.querySelector('#multiple-value').textContent=this.value"
>
    <sp-menu-item value="item-1">Apple</sp-menu-item>
    <sp-menu-item value="item-2">Banana</sp-menu-item>
    <sp-menu-item value="item-3" selected>Goji berry</sp-menu-item>
    <sp-menu-item value="item-4" selected>Grapes</sp-menu-item>
    <sp-menu-item value="item-5" disabled>Kumquat</sp-menu-item>
    <sp-menu-item value="item-6">Orange</sp-menu-item>
</sp-menu>

selects="inherit" #

When selects is set to inherit, the <sp-menu> element will allow its <sp-menu-item> children to participate in the selection of its nearest <sp-menu> ancestor.

<p>
    The value of the `&lt;sp-menu&gt;` element is:
    <span id="inherit-value">item-3 || item-4 || item-8 || item-11</span>
</p>
<sp-menu
    label="Choose some groceries"
    selects="multiple"
    value-separator=" || "
    onchange="this.previousElementSibling.querySelector('#inherit-value').textContent=this.value"
>
    <sp-menu label="Fruit" selects="inherit">
        <sp-menu-item value="item-1">Apple</sp-menu-item>
        <sp-menu-item value="item-2">Banana</sp-menu-item>
        <sp-menu-item value="item-3" selected>Goji berry</sp-menu-item>
        <sp-menu-item value="item-4" selected>Grapes</sp-menu-item>
        <sp-menu-item value="item-5" disabled>Kumquat</sp-menu-item>
        <sp-menu-item value="item-6">Orange</sp-menu-item>
    </sp-menu>
    <sp-menu label="Vegetables" selects="inherit">
        <sp-menu-item value="item-7">Carrot</sp-menu-item>
        <sp-menu-item value="item-8" selected>Garlic</sp-menu-item>
        <sp-menu-item value="item-9" disabled>Lettuce</sp-menu-item>
        <sp-menu-item value="item-10">Onion</sp-menu-item>
        <sp-menu-item value="item-11" selected>Potato</sp-menu-item>
        <sp-menu-item value="item-12">Tomato</sp-menu-item>
    </sp-menu>
</sp-menu>

"change" event #

Whether <sp-menu> carries a selection or not, when one of the <sp-menu-item> children that it manages is activated the <sp-menu> element will dispatch a change event. At dispatch time, even when a selection is not held due to the absence of the selects attribute, the value of the <sp-menu> will correspond to the <sp-menu-item> that was activated. When the selects attribute is present, this value will be persisted beyond the lifecycle of the change event. When selects="multiple" the values of multiple items will be comma separated unless otherwise set via the value-separator attribute.

Note: The change event is only dispatched on a left mouse click or Enter/Space keypress. Right/Middle mouse clicks will not dispatch the change event.

Spectrum Web Components

sp-menu

NPM

1.1.2

Storybook

View Storybook

Try it on

webcomponents.dev

Attributes and Properties #

Slots #

Events #

1.1.2 (2025-02-12) #

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) #

Bug Fixes #

1.0.0 (2024-10-31) #

0.49.0 (2024-10-15) #

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) #

Bug Fixes #

Features #

0.45.0 (2024-07-30) #

0.44.0 (2024-07-15) #

Features #

0.43.0 (2024-06-11) #

Bug Fixes #

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) #

Bug Fixes #

Features #

0.41.2 (2024-03-05) #

Bug Fixes #

0.41.1 (2024-02-22) #

Bug Fixes #

0.41.0 (2024-02-13) #

Bug Fixes #

0.40.5 (2024-02-05) #

Bug Fixes #

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) #

0.40.0 (2023-11-16) #

0.39.4 (2023-11-02) #

0.39.3 (2023-10-18) #

Bug Fixes #

0.39.2 (2023-10-13) #

Bug Fixes #

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) #

Bug Fixes #

Features #

Performance Improvements #

0.36.0 (2023-08-18) #

Features #

0.35.0 (2023-07-31) #

Bug Fixes #

Spectrum
Web Components