sp-menu-group

Examples API

Attributes and Properties #

Property Attribute Type Default Description
dir dir 'ltr' | 'rtl' 'ltr'
label label string ''
selects 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 value string ''
valueSeparator value-separator string ','

Slots #

Name Description
header headline of the menu group
default slot menu items to be listed in the group

Events #

Name Type Description
change Event Announces that the `value` of the element has changed

Overview #

An <sp-menu-group> will gather a collection of <sp-menu-item> elements into a group as part of the content delivered in an <sp-menu> element. Supplying content to the header slot will allow it label the group both visually and for screen readers. Like <sp-menu>, an <sp-menu-group> element can maintain a selection as outlined by the value or absence of its selects attribute.

Usage #

See it on NPM! How big is this package in your project? Try it on webcomponents.dev

yarn add @spectrum-web-components/menu

Import the side effectful registration of <sp-menu-group> as follows:

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

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

import { MenuGroup } from '@spectrum-web-components/menu';

Example #

An <sp-menu-group> can be used to organize <sp-menu-item>s in an <sp-memu> in to collections with a shared header. Use an element addressed to the slot="header to pass the content of that header.

<p>
Your favorite park in New York is: <span id="group-1-value"></span>
<br><br>
Your favorite park in San Fransisco is: <span id="group-2-value"></span>
</p>
<sp-popover open style="position: relative">
<sp-menu
label="What are your favorite parks?"
style="width: 200px"
onchange="this.parentElement
.previousElementSibling
.querySelector(`#${arguments[0].target.id}-value`)
.textContent = arguments[0].target.value
"
>

<sp-menu-group
id="group-1"
selects="single"
>

<span slot="header">New York</span>
<sp-menu-item>
Central Park
</sp-menu-item>
<sp-menu-item>
Flushing Meadows Corona Park
</sp-menu-item>
<sp-menu-item>
Prospect Park
</sp-menu-item>
</sp-menu-group>
<sp-menu-group
id="group-2"
selects="single"
>

<span slot="header">San Fransisco</span>
<sp-menu-item>
Golden Gate Park
</sp-menu-item>
<sp-menu-item>
John McLaren Park
</sp-menu-item>
<sp-menu-item>
Lake Merced Park
</sp-menu-item>
</sp-menu-group>
</sp-menu>
</sp-popover>