- Light
- Dark
- Darkest
- Medium
- Large
- LTR
- RTL
- Default
- Express
Menu
Component status | Contribution |
---|---|
Last released | May 23, 2023 |
Current version | @spectrum-css/menu@4.0.37 |
Variants
StandardContribution
- Deselect
- Select Inverse
- Feather...
- Select and Mask...
- Save Selection
- Make Work Path
-
- Action 1
- Action 2
- Action 3
-
- Edit
- Copy
-
- Financial District
- South of Market
- North Beach
-
- City Center
- Jack London Square
- My best friend's mom's house in the burbs just off Silverado street
Show markup
<div style="display: flex; align-items: flex-start; justify-content: space-around;">
<ul class="spectrum-Menu" role="menu">
<li class="spectrum-Menu-item" role="menuitem" tabindex="0">
<span class="spectrum-Menu-itemLabel">Deselect</span>
</li>
<li class="spectrum-Menu-item" role="menuitem" tabindex="0">
<span class="spectrum-Menu-itemLabel">Select Inverse</span>
</li>
<li class="spectrum-Menu-item" role="menuitem" tabindex="0">
<span class="spectrum-Menu-itemLabel">Feather...</span>
</li>
<li class="spectrum-Menu-item" role="menuitem" tabindex="0">
<span class="spectrum-Menu-itemLabel">Select and Mask...</span>
</li>
<li class="spectrum-Divider spectrum-Divider--sizeM spectrum-Menu-divider" role="separator"></li>
<li class="spectrum-Menu-item" role="menuitem" tabindex="0">
<span class="spectrum-Menu-itemLabel">Save Selection</span>
</li>
<li class="spectrum-Menu-item is-disabled" role="menuitem" aria-disabled="true">
<span class="spectrum-Menu-itemLabel">Make Work Path</span>
</li>
</ul>
<ul class="spectrum-Menu" role="menu">
<li role="presentation">
<span class="spectrum-Menu-sectionHeading" id="menu-heading-category-1" aria-hidden="true">Section Heading</span>
<ul class="spectrum-Menu" role="group" aria-labelledby="menu-heading-category-1">
<li class="spectrum-Menu-item" role="menuitem" tabindex="0">
<span class="spectrum-Menu-itemLabel">Action 1</span>
</li>
<li class="spectrum-Menu-item" role="menuitem" tabindex="0">
<span class="spectrum-Menu-itemLabel">Action 2</span>
</li>
<li class="spectrum-Menu-item" role="menuitem" tabindex="0">
<span class="spectrum-Menu-itemLabel">Action 3</span>
</li>
</ul>
</li>
<li class="spectrum-Divider spectrum-Divider--sizeM spectrum-Menu-divider" role="separator"></li>
<li role="presentation">
<span class="spectrum-Menu-sectionHeading" id="menu-heading-category-2" aria-hidden="true">Section Heading</span>
<ul class="spectrum-Menu" role="group" aria-labelledby="menu-heading-category-1" aria-disabled="true">
<li class="spectrum-Menu-item" role="menuitem" tabindex="0">
<svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-Menu-itemIcon" focusable="false" aria-hidden="true" aria-label="SaveFloppy">
<use xlink:href="#spectrum-icon-18-Edit"></use>
</svg>
<span class="spectrum-Menu-itemLabel">Edit</span>
</li>
<li class="spectrum-Menu-item is-disabled" role="menuitem" aria-disabled="true">
<svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-Menu-itemIcon" focusable="false" aria-hidden="true" aria-label="DataDownload">
<use xlink:href="#spectrum-icon-18-Copy"></use>
</svg>
<span class="spectrum-Menu-itemLabel">Copy</span>
</li>
</ul>
</li>
</ul>
<ul class="spectrum-Menu is-selectable" role="listbox">
<li role="presentation">
<span class="spectrum-Menu-sectionHeading" id="menu-heading-sf" aria-hidden="true">San Francisco</span>
<ul class="spectrum-Menu" role="group" aria-labelledby="menu-heading-sf">
<li class="spectrum-Menu-item" role="option" aria-selected="true" tabindex="0">
<span class="spectrum-Menu-itemLabel">Financial District</span>
</li>
<li class="spectrum-Menu-item" role="option" tabindex="0">
<span class="spectrum-Menu-itemLabel">South of Market</span>
</li>
<li class="spectrum-Menu-item" role="option" tabindex="0">
<span class="spectrum-Menu-itemLabel">North Beach</span>
</li>
</ul>
</li>
<li class="spectrum-Divider spectrum-Divider--sizeM spectrum-Menu-divider" role="separator"></li>
<li role="presentation">
<span class="spectrum-Menu-sectionHeading" id="menu-heading-oak" aria-hidden="true">Oakland</span>
<ul class="spectrum-Menu" role="group" aria-labelledby="menu-heading-oak">
<li class="spectrum-Menu-item" role="option" tabindex="0">
<span class="spectrum-Menu-itemLabel">City Center</span>
</li>
<li class="spectrum-Menu-item is-disabled" role="option">
<span class="spectrum-Menu-itemLabel">Jack London Square</span>
</li>
<li class="spectrum-Menu-item is-selected" role="option" tabindex="0">
<span class="spectrum-Menu-itemLabel">My best friend's mom's house in the burbs just off Silverado street</span>
<svg class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Menu-checkmark spectrum-Menu-itemIcon" focusable="false" aria-hidden="true">
<use xlink:href="#spectrum-css-icon-Checkmark100" />
</svg>
</li>
</ul>
</li>
</ul>
</div>
NestedContribution
- Deselect
- Select Inverse
- Feather...
- Select and Mask...
- Save Selection
- Deselect
- Select and Mask...
Show markup
<div style="position: relative; height: 260px;">
<ul class="spectrum-Menu" role="menu">
<li class="spectrum-Menu-item" role="menuitem" tabindex="0">
<span class="spectrum-Menu-itemLabel">Deselect</span>
</li>
<li class="spectrum-Menu-item" role="menuitem" tabindex="0">
<span class="spectrum-Menu-itemLabel">Select Inverse</span>
</li>
<li class="spectrum-Menu-item is-open" role="menuitem" tabindex="0">
<span class="spectrum-Menu-itemLabel">Feather...</span>
<svg class="spectrum-Icon spectrum-UIIcon-ChevronRight100 spectrum-Menu-chevron spectrum-Menu-itemIcon" focusable="false" aria-hidden="true" aria-label="Next">
<use xlink:href="#spectrum-css-icon-Chevron100" />
</svg>
</li>
<li class="spectrum-Menu-item" role="menuitem" tabindex="0">
<span class="spectrum-Menu-itemLabel">Select and Mask...</span>
</li>
<li class="spectrum-Menu-item" role="menuitem" tabindex="0">
<span class="spectrum-Menu-itemLabel">Save Selection</span>
</li>
</ul>
<ul class="spectrum-Menu" role="menu">
<li class="spectrum-Menu-item" role="menuitem" tabindex="0">
<span class="spectrum-Menu-itemLabel">Deselect</span>
</li>
<li class="spectrum-Menu-item" role="menuitem" tabindex="0">
<span class="spectrum-Menu-itemLabel">Select and Mask...</span>
</li>
</ul>
</div>