- Light
- Dark
- Darkest
- Medium
- Large
- LTR
- RTL
- Default
- Express
Menu
| Component status | Contribution |
|---|---|
| Last released | November 9, 2023 |
| Current version | @spectrum-css/menu@5.1.3 |
Variants
SizingContribution
S
- Small Menu
- Small Menu
- Small Menu
- Small Menu
M
- Medium Menu
- Medium Menu
- Medium Menu
- Medium Menu
L
- Large Menu
- Large Menu
- Large Menu
- Large Menu
XL
- XL Menu
- XL Menu
- XL Menu
- XL Menu
Show markup
<div class="spectrum-Examples">
<div class="spectrum-Examples-item">
<h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">S</h4>
<div class="spectrum-Examples-itemGroup">
<ul class="spectrum-Menu spectrum-Menu--sizeS" role="menu">
<li class="spectrum-Menu-item" role="menuitem" tabindex="0">
<span class="spectrum-Menu-itemLabel">Small Menu</span>
</li>
<li class="spectrum-Menu-item" role="menuitem" tabindex="0">
<span class="spectrum-Menu-itemLabel">Small Menu</span>
</li>
<li class="spectrum-Menu-item" role="menuitem" tabindex="0">
<span class="spectrum-Menu-itemLabel">Small Menu</span>
</li>
<li class="spectrum-Menu-item" role="menuitem" tabindex="0">
<span class="spectrum-Menu-itemLabel">Small Menu</span>
</li>
</ul>
</div>
</div>
<div class="spectrum-Examples-item">
<h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">M</h4>
<div class="spectrum-Examples-itemGroup">
<ul class="spectrum-Menu spectrum-Menu--sizeM" role="menu">
<li class="spectrum-Menu-item" role="menuitem" tabindex="0">
<span class="spectrum-Menu-itemLabel">Medium Menu</span>
</li>
<li class="spectrum-Menu-item" role="menuitem" tabindex="0">
<span class="spectrum-Menu-itemLabel">Medium Menu</span>
</li>
<li class="spectrum-Menu-item" role="menuitem" tabindex="0">
<span class="spectrum-Menu-itemLabel">Medium Menu</span>
</li>
<li class="spectrum-Menu-item" role="menuitem" tabindex="0">
<span class="spectrum-Menu-itemLabel">Medium Menu</span>
</li>
</ul>
</div>
</div>
<div class="spectrum-Examples-item">
<h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">L</h4>
<div class="spectrum-Examples-itemGroup">
<ul class="spectrum-Menu spectrum-Menu--sizeL" role="menu">
<li class="spectrum-Menu-item" role="menuitem" tabindex="0">
<span class="spectrum-Menu-itemLabel">Large Menu</span>
</li>
<li class="spectrum-Menu-item" role="menuitem" tabindex="0">
<span class="spectrum-Menu-itemLabel">Large Menu</span>
</li>
<li class="spectrum-Menu-item" role="menuitem" tabindex="0">
<span class="spectrum-Menu-itemLabel">Large Menu</span>
</li>
<li class="spectrum-Menu-item" role="menuitem" tabindex="0">
<span class="spectrum-Menu-itemLabel">Large Menu</span>
</li>
</ul>
</div>
</div>
<div class="spectrum-Examples-item">
<h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">XL</h4>
<div class="spectrum-Examples-itemGroup">
<ul class="spectrum-Menu spectrum-Menu--sizeXL" role="menu">
<li class="spectrum-Menu-item" role="menuitem" tabindex="0">
<span class="spectrum-Menu-itemLabel">XL Menu</span>
</li>
<li class="spectrum-Menu-item" role="menuitem" tabindex="0">
<span class="spectrum-Menu-itemLabel">XL Menu</span>
</li>
<li class="spectrum-Menu-item" role="menuitem" tabindex="0">
<span class="spectrum-Menu-itemLabel">XL Menu</span>
</li>
<li class="spectrum-Menu-item" role="menuitem" tabindex="0">
<span class="spectrum-Menu-itemLabel">XL Menu</span>
</li>
</ul>
</div>
</div>
</div>
Sizing with IconsContribution
S
- Cut
- Copy
- Paste
M
- Cut
- Copy
- Paste
L
- Cut
- Copy
- Paste
XL
- Cut
- Copy
- Paste
Show markup
<div class="spectrum-Examples">
<div class="spectrum-Examples-item">
<h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">S</h4>
<div class="spectrum-Examples-itemGroup">
<ul class="spectrum-Menu spectrum-Menu--sizeS" role="menu">
<li class="spectrum-Menu-item" role="menuitem" tabindex="0">
<svg class="spectrum-Icon spectrum-Icon--sizeS spectrum-Menu-itemIcon spectrum-Menu-itemIcon--workflowIcon" focusable="false" aria-hidden="true" aria-label="Cut Icon">
<use xlink:href="#spectrum-icon-18-Cut"></use>
</svg>
<span class="spectrum-Menu-itemLabel">Cut</span>
</li>
<li class="spectrum-Menu-item" role="menuitem" tabindex="0">
<svg class="spectrum-Icon spectrum-Icon--sizeS spectrum-Menu-itemIcon spectrum-Menu-itemIcon--workflowIcon" focusable="false" aria-hidden="true" aria-label="Copy Icon">
<use xlink:href="#spectrum-icon-18-Copy"></use>
</svg>
<span class="spectrum-Menu-itemLabel">Copy</span>
</li>
<li class="spectrum-Menu-item" role="menuitem" tabindex="0">
<svg class="spectrum-Icon spectrum-Icon--sizeS spectrum-Menu-itemIcon spectrum-Menu-itemIcon--workflowIcon" focusable="false" aria-hidden="true" aria-label="Paste Icon">
<use xlink:href="#spectrum-icon-18-Paste"></use>
</svg>
<span class="spectrum-Menu-itemLabel">Paste</span>
</li>
</ul>
</div>
</div>
<div class="spectrum-Examples-item">
<h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">M</h4>
<div class="spectrum-Examples-itemGroup">
<ul class="spectrum-Menu spectrum-Menu--sizeM" role="menu">
<li class="spectrum-Menu-item" role="menuitem" tabindex="0">
<svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-Menu-itemIcon spectrum-Menu-itemIcon--workflowIcon" focusable="false" aria-hidden="true" aria-label="Cut Icon">
<use xlink:href="#spectrum-icon-18-Cut"></use>
</svg>
<span class="spectrum-Menu-itemLabel">Cut</span>
</li>
<li class="spectrum-Menu-item" role="menuitem" tabindex="0">
<svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-Menu-itemIcon spectrum-Menu-itemIcon--workflowIcon" focusable="false" aria-hidden="true" aria-label="Copy Icon">
<use xlink:href="#spectrum-icon-18-Copy"></use>
</svg>
<span class="spectrum-Menu-itemLabel">Copy</span>
</li>
<li class="spectrum-Menu-item" role="menuitem" tabindex="0">
<svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-Menu-itemIcon spectrum-Menu-itemIcon--workflowIcon" focusable="false" aria-hidden="true" aria-label="Paste Icon">
<use xlink:href="#spectrum-icon-18-Paste"></use>
</svg>
<span class="spectrum-Menu-itemLabel">Paste</span>
</li>
</ul>
</div>
</div>
<div class="spectrum-Examples-item">
<h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">L</h4>
<div class="spectrum-Examples-itemGroup">
<ul class="spectrum-Menu spectrum-Menu--sizeL" role="menu">
<li class="spectrum-Menu-item" role="menuitem" tabindex="0">
<svg class="spectrum-Icon spectrum-Icon--sizeL spectrum-Menu-itemIcon spectrum-Menu-itemIcon--workflowIcon" focusable="false" aria-hidden="true" aria-label="Cut Icon">
<use xlink:href="#spectrum-icon-18-Cut"></use>
</svg>
<span class="spectrum-Menu-itemLabel">Cut</span>
</li>
<li class="spectrum-Menu-item" role="menuitem" tabindex="0">
<svg class="spectrum-Icon spectrum-Icon--sizeL spectrum-Menu-itemIcon spectrum-Menu-itemIcon--workflowIcon" focusable="false" aria-hidden="true" aria-label="Copy Icon">
<use xlink:href="#spectrum-icon-18-Copy"></use>
</svg>
<span class="spectrum-Menu-itemLabel">Copy</span>
</li>
<li class="spectrum-Menu-item" role="menuitem" tabindex="0">
<svg class="spectrum-Icon spectrum-Icon--sizeL spectrum-Menu-itemIcon spectrum-Menu-itemIcon--workflowIcon" focusable="false" aria-hidden="true" aria-label="Paste Icon">
<use xlink:href="#spectrum-icon-18-Paste"></use>
</svg>
<span class="spectrum-Menu-itemLabel">Paste</span>
</li>
</ul>
</div>
</div>
<div class="spectrum-Examples-item">
<h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">XL</h4>
<div class="spectrum-Examples-itemGroup">
<ul class="spectrum-Menu spectrum-Menu--sizeXL" role="menu">
<li class="spectrum-Menu-item" role="menuitem" tabindex="0">
<svg class="spectrum-Icon spectrum-Icon--sizeXL spectrum-Menu-itemIcon spectrum-Menu-itemIcon--workflowIcon" focusable="false" aria-hidden="true" aria-label="Cut Icon">
<use xlink:href="#spectrum-icon-18-Cut"></use>
</svg>
<span class="spectrum-Menu-itemLabel">Cut</span>
</li>
<li class="spectrum-Menu-item" role="menuitem" tabindex="0">
<svg class="spectrum-Icon spectrum-Icon--sizeXL spectrum-Menu-itemIcon spectrum-Menu-itemIcon--workflowIcon" focusable="false" aria-hidden="true" aria-label="Copy Icon">
<use xlink:href="#spectrum-icon-18-Copy"></use>
</svg>
<span class="spectrum-Menu-itemLabel">Copy</span>
</li>
<li class="spectrum-Menu-item" role="menuitem" tabindex="0">
<svg class="spectrum-Icon spectrum-Icon--sizeXL spectrum-Menu-itemIcon spectrum-Menu-itemIcon--workflowIcon" focusable="false" aria-hidden="true" aria-label="Paste Icon">
<use xlink:href="#spectrum-icon-18-Paste"></use>
</svg>
<span class="spectrum-Menu-itemLabel">Paste</span>
</li>
</ul>
</div>
</div>
</div>
With disabled item(s)Contribution
Menu with icons
- Cut
- Copy
- Paste
Menu with descriptions
- Quick export Share a snapshot
- Open a copy Illustrator for iPad
- Share link Enable comments and download
Menu with icons & descriptions
- Quick export Share a snapshot
- Open a copy Illustrator for iPad
- Share link Enable comments and download
Show markup
<div class="spectrum-Examples">
<div class="spectrum-Examples-item">
<h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">Menu with icons</h4>
<div class="spectrum-Examples-itemGroup">
<ul class="spectrum-Menu spectrum-Menu--sizeM" role="menu">
<li class="spectrum-Menu-item" role="menuitem" tabindex="0">
<svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-Menu-itemIcon spectrum-Menu-itemIcon--workflowIcon" focusable="false" aria-hidden="true" aria-label="Cut Icon">
<use xlink:href="#spectrum-icon-18-Cut"></use>
</svg>
<span class="spectrum-Menu-itemLabel">Cut</span>
</li>
<li class="spectrum-Menu-item" role="menuitem" tabindex="0">
<svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-Menu-itemIcon spectrum-Menu-itemIcon--workflowIcon" focusable="false" aria-hidden="true" aria-label="Copy Icon">
<use xlink:href="#spectrum-icon-18-Copy"></use>
</svg>
<span class="spectrum-Menu-itemLabel">Copy</span>
</li>
<li class="spectrum-Menu-item is-disabled" role="menuitem" aria-disabled="true">
<svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-Menu-itemIcon spectrum-Menu-itemIcon--workflowIcon" focusable="false" aria-hidden="true" aria-label="Paste Icon">
<use xlink:href="#spectrum-icon-18-Paste"></use>
</svg>
<span class="spectrum-Menu-itemLabel">Paste</span>
</li>
</ul>
</div>
</div>
<div class="spectrum-Examples-item">
<h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">Menu with descriptions</h4>
<div class="spectrum-Examples-itemGroup">
<ul class="spectrum-Menu spectrum-Menu--sizeM" role="menu">
<li class="spectrum-Menu-item" role="menuitem" tabindex="0">
<span class="spectrum-Menu-itemLabel">Quick export</span>
<span class="spectrum-Menu-itemDescription">Share a snapshot</span>
</li>
<li class="spectrum-Menu-item" role="menuitem" tabindex="0">
<span class="spectrum-Menu-itemLabel">Open a copy</span>
<span class="spectrum-Menu-itemDescription">Illustrator for iPad</span>
</li>
<li class="spectrum-Menu-item is-disabled" role="menuitem" aria-disabled="true">
<span class="spectrum-Menu-itemLabel">Share link</span>
<span class="spectrum-Menu-itemDescription">Enable comments and download</span>
</li>
</ul>
</div>
</div>
<div class="spectrum-Examples-item">
<h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">Menu with icons & descriptions</h4>
<div class="spectrum-Examples-itemGroup">
<ul class="spectrum-Menu spectrum-Menu--sizeM" role="menu">
<li class="spectrum-Menu-item" role="menuitem" tabindex="0">
<svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-Menu-itemIcon spectrum-Menu-itemIcon--workflowIcon" focusable="false" aria-hidden="true" aria-label="Export Icon">
<use xlink:href="#spectrum-icon-18-Export"></use>
</svg>
<span class="spectrum-Menu-itemLabel">Quick export</span>
<span class="spectrum-Menu-itemDescription">Share a snapshot</span>
</li>
<li class="spectrum-Menu-item" role="menuitem" tabindex="0">
<svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-Menu-itemIcon spectrum-Menu-itemIcon--workflowIcon" focusable="false" aria-hidden="true" aria-label="Folder Open Icon">
<use xlink:href="#spectrum-icon-18-FolderOpen"></use>
</svg>
<span class="spectrum-Menu-itemLabel">Open a copy</span>
<span class="spectrum-Menu-itemDescription">Illustrator for iPad</span>
</li>
<li class="spectrum-Menu-item is-disabled" role="menuitem" aria-disabled="true">
<svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-Menu-itemIcon spectrum-Menu-itemIcon--workflowIcon" focusable="false" aria-hidden="true" aria-label="Share Icon">
<use xlink:href="#spectrum-icon-18-Share"></use>
</svg>
<span class="spectrum-Menu-itemLabel">Share link</span>
<span class="spectrum-Menu-itemDescription">Enable comments and download</span>
</li>
</ul>
</div>
</div>
</div>
Text overflowContribution
Menu without descriptions
- Small (works best for mobile phones)
- Medium (all purpose)
- Large (works best for printing)
Menu with descriptions
- Small (works best for mobile phones) A lengthy description about small is here
- Medium (all purpose) A lengthy description about medium is here
- Large (works best for printing) A lengthy description about large is here
Show markup
<div class="spectrum-Examples" style="justify-content: flex-start; gap: 25%;">
<div class="spectrum-Examples-item">
<h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">Menu without descriptions</h4>
<div class="spectrum-Examples-itemGroup" style="max-width: 150px;">
<ul class="spectrum-Menu spectrum-Menu--sizeM" role="menu">
<li class="spectrum-Menu-item" role="menuitem" tabindex="0">
<span class="spectrum-Menu-itemLabel">Small (works best for mobile phones)</span>
</li>
<li class="spectrum-Menu-item" role="menuitem" tabindex="0">
<span class="spectrum-Menu-itemLabel">Medium (all purpose)</span>
</li>
<li class="spectrum-Menu-item" role="menuitem" tabindex="0">
<span class="spectrum-Menu-itemLabel">Large (works best for printing)</span>
</li>
</ul>
</div>
</div>
<div class="spectrum-Examples-item">
<h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">Menu with descriptions</h4>
<div class="spectrum-Examples-itemGroup" style="max-width: 150px;">
<ul class="spectrum-Menu spectrum-Menu--sizeM" role="menu">
<li class="spectrum-Menu-item" role="menuitem" tabindex="0">
<span class="spectrum-Menu-itemLabel">Small (works best for mobile phones)</span>
<span class="spectrum-Menu-itemDescription">A lengthy description about small is here</span>
</li>
<li class="spectrum-Menu-item" role="menuitem" tabindex="0">
<span class="spectrum-Menu-itemLabel">Medium (all purpose)</span>
<span class="spectrum-Menu-itemDescription">A lengthy description about medium is here</span>
</li>
<li class="spectrum-Menu-item" role="menuitem" tabindex="0">
<span class="spectrum-Menu-itemLabel">Large (works best for printing)</span>
<span class="spectrum-Menu-itemDescription">A lengthy description about large is here</span>
</li>
</ul>
</div>
</div>
</div>
Sizing with descriptionsContribution
S
- Quick export Share a snapshot
- Open a copy Illustrator for iPad
- Share link Enable comments and download
M
- Quick export Share a snapshot
- Open a copy Illustrator for iPad
- Share link Enable comments and download
L
- Quick export Share a snapshot
- Open a copy Illustrator for iPad
- Share link Enable comments and download
XL
- Quick export Share a snapshot
- Open a copy Illustrator for iPad
- Share link Enable comments and download
Show markup
<div class="spectrum-Examples">
<div class="spectrum-Examples-item">
<h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">S</h4>
<div class="spectrum-Examples-itemGroup">
<ul class="spectrum-Menu spectrum-Menu--sizeS" role="menu">
<li class="spectrum-Menu-item" role="menuitem" tabindex="0">
<span class="spectrum-Menu-itemLabel">Quick export</span>
<span class="spectrum-Menu-itemDescription">Share a snapshot</span>
</li>
<li class="spectrum-Menu-item" role="menuitem" tabindex="0">
<span class="spectrum-Menu-itemLabel">Open a copy</span>
<span class="spectrum-Menu-itemDescription">Illustrator for iPad</span>
</li>
<li class="spectrum-Menu-item" role="menuitem" tabindex="0">
<span class="spectrum-Menu-itemLabel">Share link</span>
<span class="spectrum-Menu-itemDescription">Enable comments and download</span>
</li>
</ul>
</div>
</div>
<div class="spectrum-Examples-item">
<h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">M</h4>
<div class="spectrum-Examples-itemGroup">
<ul class="spectrum-Menu spectrum-Menu--sizeM" role="menu">
<li class="spectrum-Menu-item" role="menuitem" tabindex="0">
<span class="spectrum-Menu-itemLabel">Quick export</span>
<span class="spectrum-Menu-itemDescription">Share a snapshot</span>
</li>
<li class="spectrum-Menu-item" role="menuitem" tabindex="0">
<span class="spectrum-Menu-itemLabel">Open a copy</span>
<span class="spectrum-Menu-itemDescription">Illustrator for iPad</span>
</li>
<li class="spectrum-Menu-item" role="menuitem" tabindex="0">
<span class="spectrum-Menu-itemLabel">Share link</span>
<span class="spectrum-Menu-itemDescription">Enable comments and download</span>
</li>
</ul>
</div>
</div>
<div class="spectrum-Examples-item">
<h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">L</h4>
<div class="spectrum-Examples-itemGroup">
<ul class="spectrum-Menu spectrum-Menu--sizeL" role="menu">
<li class="spectrum-Menu-item" role="menuitem" tabindex="0">
<span class="spectrum-Menu-itemLabel">Quick export</span>
<span class="spectrum-Menu-itemDescription">Share a snapshot</span>
</li>
<li class="spectrum-Menu-item" role="menuitem" tabindex="0">
<span class="spectrum-Menu-itemLabel">Open a copy</span>
<span class="spectrum-Menu-itemDescription">Illustrator for iPad</span>
</li>
<li class="spectrum-Menu-item" role="menuitem" tabindex="0">
<span class="spectrum-Menu-itemLabel">Share link</span>
<span class="spectrum-Menu-itemDescription">Enable comments and download</span>
</li>
</ul>
</div>
</div>
<div class="spectrum-Examples-item">
<h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">XL</h4>
<div class="spectrum-Examples-itemGroup">
<ul class="spectrum-Menu spectrum-Menu--sizeXL" role="menu">
<li class="spectrum-Menu-item" role="menuitem" tabindex="0">
<span class="spectrum-Menu-itemLabel">Quick export</span>
<span class="spectrum-Menu-itemDescription">Share a snapshot</span>
</li>
<li class="spectrum-Menu-item" role="menuitem" tabindex="0">
<span class="spectrum-Menu-itemLabel">Open a copy</span>
<span class="spectrum-Menu-itemDescription">Illustrator for iPad</span>
</li>
<li class="spectrum-Menu-item" role="menuitem" tabindex="0">
<span class="spectrum-Menu-itemLabel">Share link</span>
<span class="spectrum-Menu-itemDescription">Enable comments and download</span>
</li>
</ul>
</div>
</div>
</div>
Sizing with descriptions and iconsContribution
S
- Quick export Share a snapshot
- Open a copy Illustrator for iPad
- Share link Enable comments and download
M
- Quick export Share a snapshot
- Open a copy Illustrator for iPad
- Share link Enable comments and download
L
- Quick export Share a snapshot
- Open a copy Illustrator for iPad
- Share link Enable comments and download
XL
- Quick export Share a snapshot
- Open a copy Illustrator for iPad
- Share link Enable comments and download
Show markup
<div class="spectrum-Examples">
<div class="spectrum-Examples-item">
<h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">S</h4>
<div class="spectrum-Examples-itemGroup">
<ul class="spectrum-Menu spectrum-Menu--sizeS" role="menu">
<li class="spectrum-Menu-item" role="menuitem" tabindex="0">
<svg class="spectrum-Icon spectrum-Icon--sizeS spectrum-Menu-itemIcon spectrum-Menu-itemIcon--workflowIcon" focusable="false" aria-hidden="true" aria-label="Export Icon">
<use xlink:href="#spectrum-icon-18-Export"></use>
</svg>
<span class="spectrum-Menu-itemLabel">Quick export</span>
<span class="spectrum-Menu-itemDescription">Share a snapshot</span>
</li>
<li class="spectrum-Menu-item" role="menuitem" tabindex="0">
<svg class="spectrum-Icon spectrum-Icon--sizeS spectrum-Menu-itemIcon spectrum-Menu-itemIcon--workflowIcon" focusable="false" aria-hidden="true" aria-label="Folder Open Icon">
<use xlink:href="#spectrum-icon-18-FolderOpen"></use>
</svg>
<span class="spectrum-Menu-itemLabel">Open a copy</span>
<span class="spectrum-Menu-itemDescription">Illustrator for iPad</span>
</li>
<li class="spectrum-Menu-item" role="menuitem" tabindex="0">
<svg class="spectrum-Icon spectrum-Icon--sizeS spectrum-Menu-itemIcon spectrum-Menu-itemIcon--workflowIcon" focusable="false" aria-hidden="true" aria-label="Share Icon">
<use xlink:href="#spectrum-icon-18-Share"></use>
</svg>
<span class="spectrum-Menu-itemLabel">Share link</span>
<span class="spectrum-Menu-itemDescription">Enable comments and download</span>
</li>
</ul>
</div>
</div>
<div class="spectrum-Examples-item">
<h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">M</h4>
<div class="spectrum-Examples-itemGroup">
<ul class="spectrum-Menu spectrum-Menu--sizeM" role="menu">
<li class="spectrum-Menu-item" role="menuitem" tabindex="0">
<svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-Menu-itemIcon spectrum-Menu-itemIcon--workflowIcon" focusable="false" aria-hidden="true" aria-label="Export Icon">
<use xlink:href="#spectrum-icon-18-Export"></use>
</svg>
<span class="spectrum-Menu-itemLabel">Quick export</span>
<span class="spectrum-Menu-itemDescription">Share a snapshot</span>
</li>
<li class="spectrum-Menu-item" role="menuitem" tabindex="0">
<svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-Menu-itemIcon spectrum-Menu-itemIcon--workflowIcon" focusable="false" aria-hidden="true" aria-label="Folder Open Icon">
<use xlink:href="#spectrum-icon-18-FolderOpen"></use>
</svg>
<span class="spectrum-Menu-itemLabel">Open a copy</span>
<span class="spectrum-Menu-itemDescription">Illustrator for iPad</span>
</li>
<li class="spectrum-Menu-item" role="menuitem" tabindex="0">
<svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-Menu-itemIcon spectrum-Menu-itemIcon--workflowIcon" focusable="false" aria-hidden="true" aria-label="Share Icon">
<use xlink:href="#spectrum-icon-18-Share"></use>
</svg>
<span class="spectrum-Menu-itemLabel">Share link</span>
<span class="spectrum-Menu-itemDescription">Enable comments and download</span>
</li>
</ul>
</div>
</div>
<div class="spectrum-Examples-item">
<h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">L</h4>
<div class="spectrum-Examples-itemGroup">
<ul class="spectrum-Menu spectrum-Menu--sizeL" role="menu">
<li class="spectrum-Menu-item" role="menuitem" tabindex="0">
<svg class="spectrum-Icon spectrum-Icon--sizeL spectrum-Menu-itemIcon spectrum-Menu-itemIcon--workflowIcon" focusable="false" aria-hidden="true" aria-label="Export Icon">
<use xlink:href="#spectrum-icon-18-Export"></use>
</svg>
<span class="spectrum-Menu-itemLabel">Quick export</span>
<span class="spectrum-Menu-itemDescription">Share a snapshot</span>
</li>
<li class="spectrum-Menu-item" role="menuitem" tabindex="0">
<svg class="spectrum-Icon spectrum-Icon--sizeL spectrum-Menu-itemIcon spectrum-Menu-itemIcon--workflowIcon" focusable="false" aria-hidden="true" aria-label="Folder Open Icon">
<use xlink:href="#spectrum-icon-18-FolderOpen"></use>
</svg>
<span class="spectrum-Menu-itemLabel">Open a copy</span>
<span class="spectrum-Menu-itemDescription">Illustrator for iPad</span>
</li>
<li class="spectrum-Menu-item" role="menuitem" tabindex="0">
<svg class="spectrum-Icon spectrum-Icon--sizeL spectrum-Menu-itemIcon spectrum-Menu-itemIcon--workflowIcon" focusable="false" aria-hidden="true" aria-label="Share Icon">
<use xlink:href="#spectrum-icon-18-Share"></use>
</svg>
<span class="spectrum-Menu-itemLabel">Share link</span>
<span class="spectrum-Menu-itemDescription">Enable comments and download</span>
</li>
</ul>
</div>
</div>
<div class="spectrum-Examples-item">
<h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">XL</h4>
<div class="spectrum-Examples-itemGroup">
<ul class="spectrum-Menu spectrum-Menu--sizeXL" role="menu">
<li class="spectrum-Menu-item" role="menuitem" tabindex="0">
<svg class="spectrum-Icon spectrum-Icon--sizeXL spectrum-Menu-itemIcon spectrum-Menu-itemIcon--workflowIcon" focusable="false" aria-hidden="true" aria-label="Export Icon">
<use xlink:href="#spectrum-icon-18-Export"></use>
</svg>
<span class="spectrum-Menu-itemLabel">Quick export</span>
<span class="spectrum-Menu-itemDescription">Share a snapshot</span>
</li>
<li class="spectrum-Menu-item" role="menuitem" tabindex="0">
<svg class="spectrum-Icon spectrum-Icon--sizeXL spectrum-Menu-itemIcon spectrum-Menu-itemIcon--workflowIcon" focusable="false" aria-hidden="true" aria-label="Folder Open Icon">
<use xlink:href="#spectrum-icon-18-FolderOpen"></use>
</svg>
<span class="spectrum-Menu-itemLabel">Open a copy</span>
<span class="spectrum-Menu-itemDescription">Illustrator for iPad</span>
</li>
<li class="spectrum-Menu-item" role="menuitem" tabindex="0">
<svg class="spectrum-Icon spectrum-Icon--sizeXL spectrum-Menu-itemIcon spectrum-Menu-itemIcon--workflowIcon" focusable="false" aria-hidden="true" aria-label="Share Icon">
<use xlink:href="#spectrum-icon-18-Share"></use>
</svg>
<span class="spectrum-Menu-itemLabel">Share link</span>
<span class="spectrum-Menu-itemDescription">Enable comments and download</span>
</li>
</ul>
</div>
</div>
</div>
CollapsibleContribution
S
M
L
XL
Show markup
<div class="spectrum-Examples">
<div class="spectrum-Examples-item">
<h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">S</h4>
<div class="spectrum-Examples-itemGroup">
<ul class="spectrum-Menu spectrum-Menu--sizeS" role="menu">
<li class="spectrum-Menu-item spectrum-Menu-item--collapsible spectrum-Menu-item--collapsible-withWorkflowIcon is-open" role="menuitem" tabindex="0">
<svg class="spectrum-Icon spectrum-Icon--sizeS spectrum-UIIcon-ChevronRight75 spectrum-Menu-chevron spectrum-Menu-itemIcon" focusable="false" aria-hidden="true" aria-label="Next">
<use xlink:href="#spectrum-css-icon-Chevron75" />
</svg>
<svg class="spectrum-Icon spectrum-Icon--sizeS spectrum-Menu-itemIcon spectrum-Menu-itemIcon--workflowIcon" focusable="false" aria-hidden="true" aria-label="Desktop & Mobile Icon">
<use xlink:href="#spectrum-icon-18-DesktopAndMobile"></use>
</svg>
<span class="spectrum-Menu-sectionHeading" id="menu-heading-category-1" aria-hidden="true">Web Design</span>
<ul id="spectrum-menu-item-0-submenu" class="spectrum-Menu spectrum-Menu--sizeS is-open" aria-labelledby="menu-heading-category-1" role="menu">
<li class="spectrum-Menu-item" role="menuitem" tabindex="0">
<span class="spectrum-Menu-itemLabel">Web Large</span>
<span class="spectrum-Menu-itemValue">1920 x 1080</span>
</li>
<li class="spectrum-Menu-item" role="menuitem" tabindex="0">
<span class="spectrum-Menu-itemLabel">Web Medium</span>
<span class="spectrum-Menu-itemValue">1366 x 768</span>
</li>
<li class="spectrum-Menu-item" role="menuitem" tabindex="0">
<span class="spectrum-Menu-itemLabel">Web Small</span>
<span class="spectrum-Menu-itemValue">1280 x 800</span>
</li>
</ul>
</li>
<li class="spectrum-Menu-item spectrum-Menu-item--collapsible is-open" role="menuitem" tabindex="0">
<svg class="spectrum-Icon spectrum-Icon--sizeS spectrum-UIIcon-ChevronRight75 spectrum-Menu-chevron spectrum-Menu-itemIcon" focusable="false" aria-hidden="true" aria-label="Next">
<use xlink:href="#spectrum-css-icon-Chevron75" />
</svg>
<span class="spectrum-Menu-sectionHeading" id="menu-heading-category-1" aria-hidden="true">Mobile</span>
<ul id="spectrum-menu-item-1-submenu" class="spectrum-Menu spectrum-Menu--sizeS is-open" aria-labelledby="spectrum-menu-item-1-label" role="menu">
<li class="spectrum-Menu-item" role="menuitem" tabindex="0">
<span class="spectrum-Menu-itemLabel">Mobile Large</span>
<span class="spectrum-Menu-itemValue">1920 x 1080</span>
</li>
<li class="spectrum-Menu-item" role="menuitem" tabindex="0">
<span class="spectrum-Menu-itemLabel">Mobile Medium</span>
<span class="spectrum-Menu-itemValue">1366 x 768</span>
</li>
<li class="spectrum-Menu-item" role="menuitem" tabindex="0">
<span class="spectrum-Menu-itemLabel">Mobile Small</span>
<span class="spectrum-Menu-itemValue">1280 x 800</span>
</li>
</ul>
</li>
<li class="spectrum-Menu-item spectrum-Menu-item--collapsible spectrum-Menu-item--collapsible-withWorkflowIcon" role="menuitem" tabindex="0">
<svg class="spectrum-Icon spectrum-Icon--sizeS spectrum-UIIcon-ChevronRight75 spectrum-Menu-chevron spectrum-Menu-itemIcon" focusable="false" aria-hidden="true" aria-label="Next">
<use xlink:href="#spectrum-css-icon-Chevron75" />
</svg>
<svg class="spectrum-Icon spectrum-Icon--sizeS spectrum-Menu-itemIcon spectrum-Menu-itemIcon--workflowIcon" focusable="false" aria-hidden="true" aria-label="Tablet Icon" style="transform: rotate(90deg);">
<use xlink:href="#spectrum-icon-18-DeviceTablet"></use>
</svg>
<span class="spectrum-Menu-sectionHeading" id="menu-heading-category-1" aria-hidden="true">Tablet</span>
<ul id="spectrum-menu-item-1-submenu" class="spectrum-Menu spectrum-Menu--sizeS" aria-labelledby="spectrum-menu-item-1-label" role="menu">
<li class="spectrum-Menu-item" role="menuitem" tabindex="0">
<span class="spectrum-Menu-itemLabel">Tablet Large</span>
<span class="spectrum-Menu-itemValue">1920 x 1080</span>
</li>
<li class="spectrum-Menu-item" role="menuitem" tabindex="0">
<span class="spectrum-Menu-itemLabel">Tablet Medium</span>
<span class="spectrum-Menu-itemValue">1366 x 768</span>
</li>
<li class="spectrum-Menu-item" role="menuitem" tabindex="0">
<span class="spectrum-Menu-itemLabel">Tablet Small</span>
<span class="spectrum-Menu-itemValue">1280 x 800</span>
</li>
</ul>
</li>
<li class="spectrum-Menu-item spectrum-Menu-item--collapsible spectrum-Menu-item--collapsible-withWorkflowIcon" role="menuitem" tabindex="0">
<svg class="spectrum-Icon spectrum-Icon--sizeS spectrum-UIIcon-ChevronRight75 spectrum-Menu-chevron spectrum-Menu-itemIcon" focusable="false" aria-hidden="true" aria-label="Next">
<use xlink:href="#spectrum-css-icon-Chevron75" />
</svg>
<svg class="spectrum-Icon spectrum-Icon--sizeS spectrum-Menu-itemIcon spectrum-Menu-itemIcon--workflowIcon" focusable="false" aria-hidden="true" aria-label="Share Icon">
<use xlink:href="#spectrum-icon-18-ShareAndroid"></use>
</svg>
<span class="spectrum-Menu-sectionHeading" id="menu-heading-category-1" aria-hidden="true">Social Media</span>
<ul id="spectrum-menu-item-1-submenu" class="spectrum-Menu spectrum-Menu--sizeS" aria-labelledby="spectrum-menu-item-1-label" role="menu">
<li class="spectrum-Menu-item" role="menuitem" tabindex="0">
<span class="spectrum-Menu-itemLabel">Social Media Large</span>
<span class="spectrum-Menu-itemValue">1920 x 1080</span>
</li>
<li class="spectrum-Menu-item" role="menuitem" tabindex="0">
<span class="spectrum-Menu-itemLabel">Social Media Medium</span>
<span class="spectrum-Menu-itemValue">1366 x 768</span>
</li>
<li class="spectrum-Menu-item" role="menuitem" tabindex="0">
<span class="spectrum-Menu-itemLabel">Social Media Small</span>
<span class="spectrum-Menu-itemValue">1280 x 800</span>
</li>
</ul>
</li>
<li class="spectrum-Menu-item spectrum-Menu-item--collapsible spectrum-Menu-item--collapsible-withWorkflowIcon" role="menuitem" tabindex="0">
<svg class="spectrum-Icon spectrum-Icon--sizeS spectrum-UIIcon-ChevronRight75 spectrum-Menu-chevron spectrum-Menu-itemIcon" focusable="false" aria-hidden="true" aria-label="Next">
<use xlink:href="#spectrum-css-icon-Chevron75" />
</svg>
<svg class="spectrum-Icon spectrum-Icon--sizeS spectrum-Menu-itemIcon spectrum-Menu-itemIcon--workflowIcon" focusable="false" aria-hidden="true" aria-label="Watch Icon">
<use xlink:href="#spectrum-icon-18-Watch"></use>
</svg>
<span class="spectrum-Menu-sectionHeading" id="menu-heading-category-1" aria-hidden="true">Watches</span>
<ul id="spectrum-menu-item-1-submenu" class="spectrum-Menu spectrum-Menu--sizeS" aria-labelledby="spectrum-menu-item-1-label" role="menu">
<li class="spectrum-Menu-item" role="menuitem" tabindex="0">
<span class="spectrum-Menu-itemLabel">Watch Large</span>
<span class="spectrum-Menu-itemValue">1920 x 1080</span>
</li>
<li class="spectrum-Menu-item" role="menuitem" tabindex="0">
<span class="spectrum-Menu-itemLabel">Watch Medium</span>
<span class="spectrum-Menu-itemValue">1366 x 768</span>
</li>
<li class="spectrum-Menu-item" role="menuitem" tabindex="0">
<span class="spectrum-Menu-itemLabel">Watch Small</span>
<span class="spectrum-Menu-itemValue">1280 x 800</span>
</li>
</ul>
</li>
</ul>
</div>
</div>
<div class="spectrum-Examples-item">
<h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">M</h4>
<div class="spectrum-Examples-itemGroup">
<ul class="spectrum-Menu spectrum-Menu--sizeM" role="menu">
<li class="spectrum-Menu-item spectrum-Menu-item--collapsible spectrum-Menu-item--collapsible-withWorkflowIcon is-open" role="menuitem" tabindex="0">
<svg class="spectrum-Icon spectrum-Icon--sizeM 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>
<svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-Menu-itemIcon spectrum-Menu-itemIcon--workflowIcon" focusable="false" aria-hidden="true" aria-label="Desktop & Mobile Icon">
<use xlink:href="#spectrum-icon-18-DesktopAndMobile"></use>
</svg>
<span class="spectrum-Menu-sectionHeading" id="menu-heading-category-1" aria-hidden="true">Web Design</span>
<ul id="spectrum-menu-item-0-submenu" class="spectrum-Menu spectrum-Menu--sizeM is-open" aria-labelledby="menu-heading-category-1" role="menu">
<li class="spectrum-Menu-item" role="menuitem" tabindex="0">
<span class="spectrum-Menu-itemLabel">Web Large</span>
<span class="spectrum-Menu-itemValue">1920 x 1080</span>
</li>
<li class="spectrum-Menu-item" role="menuitem" tabindex="0">
<span class="spectrum-Menu-itemLabel">Web Medium</span>
<span class="spectrum-Menu-itemValue">1366 x 768</span>
</li>
<li class="spectrum-Menu-item" role="menuitem" tabindex="0">
<span class="spectrum-Menu-itemLabel">Web Small</span>
<span class="spectrum-Menu-itemValue">1280 x 800</span>
</li>
</ul>
</li>
<li class="spectrum-Menu-item spectrum-Menu-item--collapsible is-open" role="menuitem" tabindex="0">
<svg class="spectrum-Icon spectrum-Icon--sizeM 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>
<span class="spectrum-Menu-sectionHeading" id="menu-heading-category-1" aria-hidden="true">Mobile</span>
<ul id="spectrum-menu-item-1-submenu" class="spectrum-Menu spectrum-Menu--sizeM is-open" aria-labelledby="spectrum-menu-item-1-label" role="menu">
<li class="spectrum-Menu-item" role="menuitem" tabindex="0">
<span class="spectrum-Menu-itemLabel">Mobile Large</span>
<span class="spectrum-Menu-itemValue">1920 x 1080</span>
</li>
<li class="spectrum-Menu-item" role="menuitem" tabindex="0">
<span class="spectrum-Menu-itemLabel">Mobile Medium</span>
<span class="spectrum-Menu-itemValue">1366 x 768</span>
</li>
<li class="spectrum-Menu-item" role="menuitem" tabindex="0">
<span class="spectrum-Menu-itemLabel">Mobile Small</span>
<span class="spectrum-Menu-itemValue">1280 x 800</span>
</li>
</ul>
</li>
<li class="spectrum-Menu-item spectrum-Menu-item--collapsible spectrum-Menu-item--collapsible-withWorkflowIcon" role="menuitem" tabindex="0">
<svg class="spectrum-Icon spectrum-Icon--sizeM 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>
<svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-Menu-itemIcon spectrum-Menu-itemIcon--workflowIcon" focusable="false" aria-hidden="true" aria-label="Tablet Icon" style="transform: rotate(90deg);">
<use xlink:href="#spectrum-icon-18-DeviceTablet"></use>
</svg>
<span class="spectrum-Menu-sectionHeading" id="menu-heading-category-1" aria-hidden="true">Tablet</span>
<ul id="spectrum-menu-item-1-submenu" class="spectrum-Menu spectrum-Menu--sizeM" aria-labelledby="spectrum-menu-item-1-label" role="menu">
<li class="spectrum-Menu-item" role="menuitem" tabindex="0">
<span class="spectrum-Menu-itemLabel">Tablet Large</span>
<span class="spectrum-Menu-itemValue">1920 x 1080</span>
</li>
<li class="spectrum-Menu-item" role="menuitem" tabindex="0">
<span class="spectrum-Menu-itemLabel">Tablet Medium</span>
<span class="spectrum-Menu-itemValue">1366 x 768</span>
</li>
<li class="spectrum-Menu-item" role="menuitem" tabindex="0">
<span class="spectrum-Menu-itemLabel">Tablet Small</span>
<span class="spectrum-Menu-itemValue">1280 x 800</span>
</li>
</ul>
</li>
<li class="spectrum-Menu-item spectrum-Menu-item--collapsible spectrum-Menu-item--collapsible-withWorkflowIcon" role="menuitem" tabindex="0">
<svg class="spectrum-Icon spectrum-Icon--sizeM 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>
<svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-Menu-itemIcon spectrum-Menu-itemIcon--workflowIcon" focusable="false" aria-hidden="true" aria-label="Share Icon">
<use xlink:href="#spectrum-icon-18-ShareAndroid"></use>
</svg>
<span class="spectrum-Menu-sectionHeading" id="menu-heading-category-1" aria-hidden="true">Social Media</span>
<ul id="spectrum-menu-item-1-submenu" class="spectrum-Menu spectrum-Menu--sizeM" aria-labelledby="spectrum-menu-item-1-label" role="menu">
<li class="spectrum-Menu-item" role="menuitem" tabindex="0">
<span class="spectrum-Menu-itemLabel">Social Media Large</span>
<span class="spectrum-Menu-itemValue">1920 x 1080</span>
</li>
<li class="spectrum-Menu-item" role="menuitem" tabindex="0">
<span class="spectrum-Menu-itemLabel">Social Media Medium</span>
<span class="spectrum-Menu-itemValue">1366 x 768</span>
</li>
<li class="spectrum-Menu-item" role="menuitem" tabindex="0">
<span class="spectrum-Menu-itemLabel">Social Media Small</span>
<span class="spectrum-Menu-itemValue">1280 x 800</span>
</li>
</ul>
</li>
<li class="spectrum-Menu-item spectrum-Menu-item--collapsible spectrum-Menu-item--collapsible-withWorkflowIcon" role="menuitem" tabindex="0">
<svg class="spectrum-Icon spectrum-Icon--sizeM 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>
<svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-Menu-itemIcon spectrum-Menu-itemIcon--workflowIcon" focusable="false" aria-hidden="true" aria-label="Watch Icon">
<use xlink:href="#spectrum-icon-18-Watch"></use>
</svg>
<span class="spectrum-Menu-sectionHeading" id="menu-heading-category-1" aria-hidden="true">Watches</span>
<ul id="spectrum-menu-item-1-submenu" class="spectrum-Menu spectrum-Menu--sizeM" aria-labelledby="spectrum-menu-item-1-label" role="menu">
<li class="spectrum-Menu-item" role="menuitem" tabindex="0">
<span class="spectrum-Menu-itemLabel">Watch Large</span>
<span class="spectrum-Menu-itemValue">1920 x 1080</span>
</li>
<li class="spectrum-Menu-item" role="menuitem" tabindex="0">
<span class="spectrum-Menu-itemLabel">Watch Medium</span>
<span class="spectrum-Menu-itemValue">1366 x 768</span>
</li>
<li class="spectrum-Menu-item" role="menuitem" tabindex="0">
<span class="spectrum-Menu-itemLabel">Watch Small</span>
<span class="spectrum-Menu-itemValue">1280 x 800</span>
</li>
</ul>
</li>
</ul>
</div>
</div>
<div class="spectrum-Examples-item">
<h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">L</h4>
<div class="spectrum-Examples-itemGroup">
<ul class="spectrum-Menu spectrum-Menu--sizeL" role="menu">
<li class="spectrum-Menu-item spectrum-Menu-item--collapsible spectrum-Menu-item--collapsible-withWorkflowIcon is-open" role="menuitem" tabindex="0">
<svg class="spectrum-Icon spectrum-Icon--sizeL spectrum-UIIcon-ChevronRight200 spectrum-Menu-chevron spectrum-Menu-itemIcon" focusable="false" aria-hidden="true" aria-label="Next">
<use xlink:href="#spectrum-css-icon-Chevron200" />
</svg>
<svg class="spectrum-Icon spectrum-Icon--sizeL spectrum-Menu-itemIcon spectrum-Menu-itemIcon--workflowIcon" focusable="false" aria-hidden="true" aria-label="Desktop & Mobile Icon">
<use xlink:href="#spectrum-icon-18-DesktopAndMobile"></use>
</svg>
<span class="spectrum-Menu-sectionHeading" id="menu-heading-category-1" aria-hidden="true">Web Design</span>
<ul id="spectrum-menu-item-0-submenu" class="spectrum-Menu spectrum-Menu--sizeL is-open" aria-labelledby="menu-heading-category-1" role="menu">
<li class="spectrum-Menu-item" role="menuitem" tabindex="0">
<span class="spectrum-Menu-itemLabel">Web Large</span>
<span class="spectrum-Menu-itemValue">1920 x 1080</span>
</li>
<li class="spectrum-Menu-item" role="menuitem" tabindex="0">
<span class="spectrum-Menu-itemLabel">Web Medium</span>
<span class="spectrum-Menu-itemValue">1366 x 768</span>
</li>
<li class="spectrum-Menu-item" role="menuitem" tabindex="0">
<span class="spectrum-Menu-itemLabel">Web Small</span>
<span class="spectrum-Menu-itemValue">1280 x 800</span>
</li>
</ul>
</li>
<li class="spectrum-Menu-item spectrum-Menu-item--collapsible is-open" role="menuitem" tabindex="0">
<svg class="spectrum-Icon spectrum-Icon--sizeL spectrum-UIIcon-ChevronRight200 spectrum-Menu-chevron spectrum-Menu-itemIcon" focusable="false" aria-hidden="true" aria-label="Next">
<use xlink:href="#spectrum-css-icon-Chevron200" />
</svg>
<span class="spectrum-Menu-sectionHeading" id="menu-heading-category-1" aria-hidden="true">Mobile</span>
<ul id="spectrum-menu-item-1-submenu" class="spectrum-Menu spectrum-Menu--sizeL is-open" aria-labelledby="spectrum-menu-item-1-label" role="menu">
<li class="spectrum-Menu-item" role="menuitem" tabindex="0">
<span class="spectrum-Menu-itemLabel">Mobile Large</span>
<span class="spectrum-Menu-itemValue">1920 x 1080</span>
</li>
<li class="spectrum-Menu-item" role="menuitem" tabindex="0">
<span class="spectrum-Menu-itemLabel">Mobile Medium</span>
<span class="spectrum-Menu-itemValue">1366 x 768</span>
</li>
<li class="spectrum-Menu-item" role="menuitem" tabindex="0">
<span class="spectrum-Menu-itemLabel">Mobile Small</span>
<span class="spectrum-Menu-itemValue">1280 x 800</span>
</li>
</ul>
</li>
<li class="spectrum-Menu-item spectrum-Menu-item--collapsible spectrum-Menu-item--collapsible-withWorkflowIcon" role="menuitem" tabindex="0">
<svg class="spectrum-Icon spectrum-Icon--sizeL spectrum-UIIcon-ChevronRight200 spectrum-Menu-chevron spectrum-Menu-itemIcon" focusable="false" aria-hidden="true" aria-label="Next">
<use xlink:href="#spectrum-css-icon-Chevron200" />
</svg>
<svg class="spectrum-Icon spectrum-Icon--sizeL spectrum-Menu-itemIcon spectrum-Menu-itemIcon--workflowIcon" focusable="false" aria-hidden="true" aria-label="Tablet Icon" style="transform: rotate(90deg);">
<use xlink:href="#spectrum-icon-18-DeviceTablet"></use>
</svg>
<span class="spectrum-Menu-sectionHeading" id="menu-heading-category-1" aria-hidden="true">Tablet</span>
<ul id="spectrum-menu-item-1-submenu" class="spectrum-Menu spectrum-Menu--sizeL" aria-labelledby="spectrum-menu-item-1-label" role="menu">
<li class="spectrum-Menu-item" role="menuitem" tabindex="0">
<span class="spectrum-Menu-itemLabel">Tablet Large</span>
<span class="spectrum-Menu-itemValue">1920 x 1080</span>
</li>
<li class="spectrum-Menu-item" role="menuitem" tabindex="0">
<span class="spectrum-Menu-itemLabel">Tablet Medium</span>
<span class="spectrum-Menu-itemValue">1366 x 768</span>
</li>
<li class="spectrum-Menu-item" role="menuitem" tabindex="0">
<span class="spectrum-Menu-itemLabel">Tablet Small</span>
<span class="spectrum-Menu-itemValue">1280 x 800</span>
</li>
</ul>
</li>
<li class="spectrum-Menu-item spectrum-Menu-item--collapsible spectrum-Menu-item--collapsible-withWorkflowIcon" role="menuitem" tabindex="0">
<svg class="spectrum-Icon spectrum-Icon--sizeL spectrum-UIIcon-ChevronRight200 spectrum-Menu-chevron spectrum-Menu-itemIcon" focusable="false" aria-hidden="true" aria-label="Next">
<use xlink:href="#spectrum-css-icon-Chevron200" />
</svg>
<svg class="spectrum-Icon spectrum-Icon--sizeL spectrum-Menu-itemIcon spectrum-Menu-itemIcon--workflowIcon" focusable="false" aria-hidden="true" aria-label="Share Icon">
<use xlink:href="#spectrum-icon-18-ShareAndroid"></use>
</svg>
<span class="spectrum-Menu-sectionHeading" id="menu-heading-category-1" aria-hidden="true">Social Media</span>
<ul id="spectrum-menu-item-1-submenu" class="spectrum-Menu spectrum-Menu--sizeL" aria-labelledby="spectrum-menu-item-1-label" role="menu">
<li class="spectrum-Menu-item" role="menuitem" tabindex="0">
<span class="spectrum-Menu-itemLabel">Social Media Large</span>
<span class="spectrum-Menu-itemValue">1920 x 1080</span>
</li>
<li class="spectrum-Menu-item" role="menuitem" tabindex="0">
<span class="spectrum-Menu-itemLabel">Social Media Medium</span>
<span class="spectrum-Menu-itemValue">1366 x 768</span>
</li>
<li class="spectrum-Menu-item" role="menuitem" tabindex="0">
<span class="spectrum-Menu-itemLabel">Social Media Small</span>
<span class="spectrum-Menu-itemValue">1280 x 800</span>
</li>
</ul>
</li>
<li class="spectrum-Menu-item spectrum-Menu-item--collapsible spectrum-Menu-item--collapsible-withWorkflowIcon" role="menuitem" tabindex="0">
<svg class="spectrum-Icon spectrum-Icon--sizeL spectrum-UIIcon-ChevronRight200 spectrum-Menu-chevron spectrum-Menu-itemIcon" focusable="false" aria-hidden="true" aria-label="Next">
<use xlink:href="#spectrum-css-icon-Chevron200" />
</svg>
<svg class="spectrum-Icon spectrum-Icon--sizeL spectrum-Menu-itemIcon spectrum-Menu-itemIcon--workflowIcon" focusable="false" aria-hidden="true" aria-label="Watch Icon">
<use xlink:href="#spectrum-icon-18-Watch"></use>
</svg>
<span class="spectrum-Menu-sectionHeading" id="menu-heading-category-1" aria-hidden="true">Watches</span>
<ul id="spectrum-menu-item-1-submenu" class="spectrum-Menu spectrum-Menu--sizeL" aria-labelledby="spectrum-menu-item-1-label" role="menu">
<li class="spectrum-Menu-item" role="menuitem" tabindex="0">
<span class="spectrum-Menu-itemLabel">Watch Large</span>
<span class="spectrum-Menu-itemValue">1920 x 1080</span>
</li>
<li class="spectrum-Menu-item" role="menuitem" tabindex="0">
<span class="spectrum-Menu-itemLabel">Watch Medium</span>
<span class="spectrum-Menu-itemValue">1366 x 768</span>
</li>
<li class="spectrum-Menu-item" role="menuitem" tabindex="0">
<span class="spectrum-Menu-itemLabel">Watch Small</span>
<span class="spectrum-Menu-itemValue">1280 x 800</span>
</li>
</ul>
</li>
</ul>
</div>
</div>
<div class="spectrum-Examples-item">
<h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">XL</h4>
<div class="spectrum-Examples-itemGroup">
<ul class="spectrum-Menu spectrum-Menu--sizeXL" role="menu">
<li class="spectrum-Menu-item spectrum-Menu-item--collapsible spectrum-Menu-item--collapsible-withWorkflowIcon is-open" role="menuitem" tabindex="0">
<svg class="spectrum-Icon spectrum-Icon--sizeXL spectrum-UIIcon-Chevron300 spectrum-Menu-chevron spectrum-Menu-itemIcon" focusable="false" aria-hidden="true" aria-label="Next">
<use xlink:href="#spectrum-css-icon-Chevron300" />
</svg>
<svg class="spectrum-Icon spectrum-Icon--sizeXL spectrum-Menu-itemIcon spectrum-Menu-itemIcon--workflowIcon" focusable="false" aria-hidden="true" aria-label="Desktop & Mobile Icon">
<use xlink:href="#spectrum-icon-18-DesktopAndMobile"></use>
</svg>
<span class="spectrum-Menu-sectionHeading" id="menu-heading-category-1" aria-hidden="true">Web Design</span>
<ul id="spectrum-menu-item-0-submenu" class="spectrum-Menu spectrum-Menu--sizeXL is-open" aria-labelledby="menu-heading-category-1" role="menu">
<li class="spectrum-Menu-item" role="menuitem" tabindex="0">
<span class="spectrum-Menu-itemLabel">Web Large</span>
<span class="spectrum-Menu-itemValue">1920 x 1080</span>
</li>
<li class="spectrum-Menu-item" role="menuitem" tabindex="0">
<span class="spectrum-Menu-itemLabel">Web Medium</span>
<span class="spectrum-Menu-itemValue">1366 x 768</span>
</li>
<li class="spectrum-Menu-item" role="menuitem" tabindex="0">
<span class="spectrum-Menu-itemLabel">Web Small</span>
<span class="spectrum-Menu-itemValue">1280 x 800</span>
</li>
</ul>
</li>
<li class="spectrum-Menu-item spectrum-Menu-item--collapsible is-open" role="menuitem" tabindex="0">
<svg class="spectrum-Icon spectrum-Icon--sizeXL spectrum-UIIcon-Chevron300 spectrum-Menu-chevron spectrum-Menu-itemIcon" focusable="false" aria-hidden="true" aria-label="Next">
<use xlink:href="#spectrum-css-icon-Chevron300" />
</svg>
<span class="spectrum-Menu-sectionHeading" id="menu-heading-category-1" aria-hidden="true">Mobile</span>
<ul id="spectrum-menu-item-1-submenu" class="spectrum-Menu spectrum-Menu--sizeXL is-open" aria-labelledby="spectrum-menu-item-1-label" role="menu">
<li class="spectrum-Menu-item" role="menuitem" tabindex="0">
<span class="spectrum-Menu-itemLabel">Mobile Large</span>
<span class="spectrum-Menu-itemValue">1920 x 1080</span>
</li>
<li class="spectrum-Menu-item" role="menuitem" tabindex="0">
<span class="spectrum-Menu-itemLabel">Mobile Medium</span>
<span class="spectrum-Menu-itemValue">1366 x 768</span>
</li>
<li class="spectrum-Menu-item" role="menuitem" tabindex="0">
<span class="spectrum-Menu-itemLabel">Mobile Small</span>
<span class="spectrum-Menu-itemValue">1280 x 800</span>
</li>
</ul>
</li>
<li class="spectrum-Menu-item spectrum-Menu-item--collapsible spectrum-Menu-item--collapsible-withWorkflowIcon" role="menuitem" tabindex="0">
<svg class="spectrum-Icon spectrum-Icon--sizeXL spectrum-UIIcon-Chevron300 spectrum-Menu-chevron spectrum-Menu-itemIcon" focusable="false" aria-hidden="true" aria-label="Next">
<use xlink:href="#spectrum-css-icon-Chevron300" />
</svg>
<svg class="spectrum-Icon spectrum-Icon--sizeXL spectrum-Menu-itemIcon spectrum-Menu-itemIcon--workflowIcon" focusable="false" aria-hidden="true" aria-label="Tablet Icon" style="transform: rotate(90deg);">
<use xlink:href="#spectrum-icon-18-DeviceTablet"></use>
</svg>
<span class="spectrum-Menu-sectionHeading" id="menu-heading-category-1" aria-hidden="true">Tablet</span>
<ul id="spectrum-menu-item-1-submenu" class="spectrum-Menu spectrum-Menu--sizeXL" aria-labelledby="spectrum-menu-item-1-label" role="menu">
<li class="spectrum-Menu-item" role="menuitem" tabindex="0">
<span class="spectrum-Menu-itemLabel">Tablet Large</span>
<span class="spectrum-Menu-itemValue">1920 x 1080</span>
</li>
<li class="spectrum-Menu-item" role="menuitem" tabindex="0">
<span class="spectrum-Menu-itemLabel">Tablet Medium</span>
<span class="spectrum-Menu-itemValue">1366 x 768</span>
</li>
<li class="spectrum-Menu-item" role="menuitem" tabindex="0">
<span class="spectrum-Menu-itemLabel">Tablet Small</span>
<span class="spectrum-Menu-itemValue">1280 x 800</span>
</li>
</ul>
</li>
<li class="spectrum-Menu-item spectrum-Menu-item--collapsible spectrum-Menu-item--collapsible-withWorkflowIcon" role="menuitem" tabindex="0">
<svg class="spectrum-Icon spectrum-Icon--sizeXL spectrum-UIIcon-Chevron300 spectrum-Menu-chevron spectrum-Menu-itemIcon" focusable="false" aria-hidden="true" aria-label="Next">
<use xlink:href="#spectrum-css-icon-Chevron300" />
</svg>
<svg class="spectrum-Icon spectrum-Icon--sizeXL spectrum-Menu-itemIcon spectrum-Menu-itemIcon--workflowIcon" focusable="false" aria-hidden="true" aria-label="Share Icon">
<use xlink:href="#spectrum-icon-18-ShareAndroid"></use>
</svg>
<span class="spectrum-Menu-sectionHeading" id="menu-heading-category-1" aria-hidden="true">Social Media</span>
<ul id="spectrum-menu-item-1-submenu" class="spectrum-Menu spectrum-Menu--sizeXL" aria-labelledby="spectrum-menu-item-1-label" role="menu">
<li class="spectrum-Menu-item" role="menuitem" tabindex="0">
<span class="spectrum-Menu-itemLabel">Social Media Large</span>
<span class="spectrum-Menu-itemValue">1920 x 1080</span>
</li>
<li class="spectrum-Menu-item" role="menuitem" tabindex="0">
<span class="spectrum-Menu-itemLabel">Social Media Medium</span>
<span class="spectrum-Menu-itemValue">1366 x 768</span>
</li>
<li class="spectrum-Menu-item" role="menuitem" tabindex="0">
<span class="spectrum-Menu-itemLabel">Social Media Small</span>
<span class="spectrum-Menu-itemValue">1280 x 800</span>
</li>
</ul>
</li>
<li class="spectrum-Menu-item spectrum-Menu-item--collapsible spectrum-Menu-item--collapsible-withWorkflowIcon" role="menuitem" tabindex="0">
<svg class="spectrum-Icon spectrum-Icon--sizeXL spectrum-UIIcon-Chevron300 spectrum-Menu-chevron spectrum-Menu-itemIcon" focusable="false" aria-hidden="true" aria-label="Next">
<use xlink:href="#spectrum-css-icon-Chevron300" />
</svg>
<svg class="spectrum-Icon spectrum-Icon--sizeXL spectrum-Menu-itemIcon spectrum-Menu-itemIcon--workflowIcon" focusable="false" aria-hidden="true" aria-label="Watch Icon">
<use xlink:href="#spectrum-icon-18-Watch"></use>
</svg>
<span class="spectrum-Menu-sectionHeading" id="menu-heading-category-1" aria-hidden="true">Watches</span>
<ul id="spectrum-menu-item-1-submenu" class="spectrum-Menu spectrum-Menu--sizeM" aria-labelledby="spectrum-menu-item-1-label" role="menu">
<li class="spectrum-Menu-item" role="menuitem" tabindex="0">
<span class="spectrum-Menu-itemLabel">Watch Large</span>
<span class="spectrum-Menu-itemValue">1920 x 1080</span>
</li>
<li class="spectrum-Menu-item" role="menuitem" tabindex="0">
<span class="spectrum-Menu-itemLabel">Watch Medium</span>
<span class="spectrum-Menu-itemValue">1366 x 768</span>
</li>
<li class="spectrum-Menu-item" role="menuitem" tabindex="0">
<span class="spectrum-Menu-itemLabel">Watch Small</span>
<span class="spectrum-Menu-itemValue">1280 x 800</span>
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
Standard with dividersContribution
- Deselect
- Select Inverse
- Feather...
- Select and Mask...
- Save Selection
- Make Work Path
Show markup
<div class="spectrum-Examples">
<div class="spectrum-Examples-item">
<ul class="spectrum-Menu spectrum-Menu--sizeM" 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--sizeS 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>
</div>
</div>
Standard with section headers and dividersContribution
-
- Marquee
- Add
- Subtract
-
- Deselect
Show markup
<div class="spectrum-Examples">
<div class="spectrum-Examples-item">
<ul class="spectrum-Menu spectrum-Menu--sizeM" role="menu">
<li role="presentation">
<span class="spectrum-Menu-sectionHeading" id="menu-heading-category-1" aria-hidden="true">Tools</span>
<ul class="spectrum-Menu spectrum-Menu--sizeM is-selectable" role="group" aria-labelledby="menu-heading-category-1">
<li class="spectrum-Menu-item is-selected" role="menuitem" tabindex="0">
<svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-UIIcon-Checkmark100 spectrum-Menu-itemIcon spectrum-Menu-checkmark" focusable="false" aria-hidden="true">
<use xlink:href="#spectrum-css-icon-Checkmark100" />
</svg>
<svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-Menu-itemIcon spectrum-Menu-itemIcon--workflowIcon" focusable="false" aria-hidden="true" aria-label="Selection Icon">
<use xlink:href="#spectrum-icon-18-Selection"></use>
</svg>
<span class="spectrum-Menu-itemLabel">Marquee</span>
</li>
<li class="spectrum-Menu-item is-selectable" role="menuitem" tabindex="0">
<svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-Menu-itemIcon spectrum-Menu-itemIcon--workflowIcon" focusable="false" aria-hidden="true" aria-label="Select Add Icon">
<use xlink:href="#spectrum-icon-18-SelectAdd"></use>
</svg>
<span class="spectrum-Menu-itemLabel">Add</span>
</li>
<li class="spectrum-Menu-item is-selectable" role="menuitem" tabindex="0">
<svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-Menu-itemIcon spectrum-Menu-itemIcon--workflowIcon" focusable="false" aria-hidden="true" aria-label="Select Subtract Icon">
<use xlink:href="#spectrum-icon-18-SelectSubtract"></use>
</svg>
<span class="spectrum-Menu-itemLabel">Subtract</span>
</li>
</ul>
</li>
<li class="spectrum-Divider spectrum-Divider--sizeS spectrum-Menu-divider" role="separator"></li>
<li role="presentation">
<span class="spectrum-Menu-sectionHeading" id="menu-heading-category-2" aria-hidden="true">Actions</span>
<ul class="spectrum-Menu spectrum-Menu--sizeM is-selectable" role="group" aria-labelledby="menu-heading-category-2" aria-disabled="true">
<li class="spectrum-Menu-item spectrum-Menu-item--is-selectable is-disabled" role="menuitem" aria-disabled="true">
<svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-Menu-itemIcon spectrum-Menu-itemIcon--workflowIcon" focusable="false" aria-hidden="true" aria-label="Deselect Icon">
<use xlink:href="#spectrum-icon-18-Deselect"></use>
</svg>
<span class="spectrum-Menu-itemLabel">Deselect</span>
</li>
</ul>
</li>
</ul>
</div>
</div>
Single SelectionContribution
Without icons
- Marquee
- Add
- Subtract
With icons
- Marquee
- Add
- Subtract
Show markup
<div class="spectrum-Examples" style="justify-content: flex-start; gap: 25%;">
<div class="spectrum-Examples-item">
<h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">Without icons</h4>
<div class="spectrum-Examples-itemGroup">
<ul class="spectrum-Menu spectrum-Menu--sizeM is-selectable" role="menu">
<li class="spectrum-Menu-item is-selected" role="menuitem" tabindex="0">
<svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-UIIcon-Checkmark100 spectrum-Menu-itemIcon spectrum-Menu-checkmark" focusable="false" aria-hidden="true">
<use xlink:href="#spectrum-css-icon-Checkmark100" />
</svg>
<span class="spectrum-Menu-itemLabel">Marquee</span>
</li>
<li class="spectrum-Menu-item is-selectable" role="menuitem" tabindex="0">
<span class="spectrum-Menu-itemLabel">Add</span>
</li>
<li class="spectrum-Menu-item is-selectable" role="menuitem" tabindex="0">
<span class="spectrum-Menu-itemLabel">Subtract</span>
</li>
</ul>
</div>
</div>
<div class="spectrum-Examples-item">
<h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">With icons</h4>
<div class="spectrum-Examples-itemGroup">
<ul class="spectrum-Menu spectrum-Menu--sizeM is-selectable" role="menu">
<li class="spectrum-Menu-item is-selected" role="menuitem" tabindex="0">
<svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-UIIcon-Checkmark100 spectrum-Menu-itemIcon spectrum-Menu-checkmark" focusable="false" aria-hidden="true">
<use xlink:href="#spectrum-css-icon-Checkmark100" />
</svg>
<svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-Menu-itemIcon spectrum-Menu-itemIcon--workflowIcon" focusable="false" aria-hidden="true" aria-label="Selection Icon">
<use xlink:href="#spectrum-icon-18-Selection"></use>
</svg>
<span class="spectrum-Menu-itemLabel">Marquee</span>
</li>
<li class="spectrum-Menu-item is-selectable" role="menuitem" tabindex="0">
<svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-Menu-itemIcon spectrum-Menu-itemIcon--workflowIcon" focusable="false" aria-hidden="true" aria-label="Select Add Icon">
<use xlink:href="#spectrum-icon-18-SelectAdd"></use>
</svg>
<span class="spectrum-Menu-itemLabel">Add</span>
</li>
<li class="spectrum-Menu-item is-selectable" role="menuitem" tabindex="0">
<svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-Menu-itemIcon spectrum-Menu-itemIcon--workflowIcon" focusable="false" aria-hidden="true" aria-label="Select Subtract Icon">
<use xlink:href="#spectrum-icon-18-SelectSubtract"></use>
</svg>
<span class="spectrum-Menu-itemLabel">Subtract</span>
</li>
</ul>
</div>
</div>
</div>
Multi-SelectionContribution
Without icons
With icons
Show markup
<div class="spectrum-Examples" style="justify-content: flex-start; gap: 25%;">
<div class="spectrum-Examples-item">
<h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">Without icons</h4>
<div class="spectrum-Examples-itemGroup">
<ul class="spectrum-Menu spectrum-Menu--sizeM is-selectableMultiple" role="menu">
<li class="spectrum-Menu-item is-selected" role="menuitem" tabindex="0">
<label class="spectrum-Checkbox spectrum-Checkbox--sizeM spectrum-Checkbox--emphasized spectrum-Menu-itemCheckbox">
<input type="checkbox" class="spectrum-Checkbox-input" aria-labelledby="ms-label1" checked>
<span class="spectrum-Checkbox-box">
<svg class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
<use xlink:href="#spectrum-css-icon-Checkmark100" />
</svg>
</span>
<span class="spectrum-Checkbox-label spectrum-Menu-itemLabel" id="ms-label1">Marquee</span>
</label>
</li>
<li class="spectrum-Menu-item is-selectable" role="menuitem" tabindex="0">
<label class="spectrum-Checkbox spectrum-Checkbox--sizeM spectrum-Checkbox--emphasized spectrum-Menu-itemCheckbox">
<input type="checkbox" class="spectrum-Checkbox-input" aria-labelledby="ms-label2">
<span class="spectrum-Checkbox-box">
<svg class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
<use xlink:href="#spectrum-css-icon-Checkmark100" />
</svg>
</span>
<span class="spectrum-Checkbox-label spectrum-Menu-itemLabel" id="ms-label2">Add</span>
</label>
</li>
<li class="spectrum-Menu-item is-selectable" role="menuitem" tabindex="0">
<label class="spectrum-Checkbox spectrum-Checkbox--sizeM spectrum-Checkbox--emphasized spectrum-Menu-itemCheckbox">
<input type="checkbox" class="spectrum-Checkbox-input" aria-labelledby="ms-label3">
<span class="spectrum-Checkbox-box">
<svg class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
<use xlink:href="#spectrum-css-icon-Checkmark100" />
</svg>
</span>
<span class="spectrum-Checkbox-label spectrum-Menu-itemLabel" id="ms-label3">Subtract</span>
</label>
</li>
</ul>
</div>
</div>
<div class="spectrum-Examples-item">
<h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">With icons</h4>
<div class="spectrum-Examples-itemGroup">
<ul class="spectrum-Menu spectrum-Menu--sizeM is-selectableMultiple" role="menu">
<li class="spectrum-Menu-item is-selected" role="menuitem" tabindex="0">
<label class="spectrum-Checkbox spectrum-Checkbox--sizeM spectrum-Checkbox--emphasized spectrum-Menu-itemCheckbox">
<input type="checkbox" class="spectrum-Checkbox-input" aria-labelledby="ms-label4" checked>
<span class="spectrum-Checkbox-box">
<svg class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
<use xlink:href="#spectrum-css-icon-Checkmark100" />
</svg>
</span>
<svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-Menu-itemIcon spectrum-Menu-itemIcon--workflowIcon" focusable="false" aria-hidden="true" aria-label="Selection Icon">
<use xlink:href="#spectrum-icon-18-Selection"></use>
</svg>
<span class="spectrum-Checkbox-label spectrum-Menu-itemLabel" id="ms-label4">Marquee</span>
</label>
</li>
<li class="spectrum-Menu-item is-selectable" role="menuitem" tabindex="0">
<label class="spectrum-Checkbox spectrum-Checkbox--sizeM spectrum-Checkbox--emphasized spectrum-Menu-itemCheckbox">
<input type="checkbox" class="spectrum-Checkbox-input" aria-labelledby="ms-label5">
<span class="spectrum-Checkbox-box">
<svg class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
<use xlink:href="#spectrum-css-icon-Checkmark100" />
</svg>
</span>
<svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-Menu-itemIcon spectrum-Menu-itemIcon--workflowIcon" focusable="false" aria-hidden="true" aria-label="Select Add Icon">
<use xlink:href="#spectrum-icon-18-SelectAdd"></use>
</svg>
<span class="spectrum-Checkbox-label spectrum-Menu-itemLabel" id="ms-label5">Add</span>
</label>
</li>
<li class="spectrum-Menu-item is-selectable" role="menuitem" tabindex="0">
<label class="spectrum-Checkbox spectrum-Checkbox--sizeM spectrum-Checkbox--emphasized spectrum-Menu-itemCheckbox">
<input type="checkbox" class="spectrum-Checkbox-input" aria-labelledby="ms-label6">
<span class="spectrum-Checkbox-box">
<svg class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
<use xlink:href="#spectrum-css-icon-Checkmark100" />
</svg>
</span>
<svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-Menu-itemIcon spectrum-Menu-itemIcon--workflowIcon" focusable="false" aria-hidden="true" aria-label="Select Subtract Icon">
<use xlink:href="#spectrum-icon-18-SelectSubtract"></use>
</svg>
<span class="spectrum-Checkbox-label spectrum-Menu-itemLabel" id="ms-label6">Subtract</span>
</label>
</li>
</ul>
</div>
</div>
</div>
With SwitchContribution
Without icons
With icons
Show markup
<div class="spectrum-Examples" style="justify-content: flex-start; gap: 25%;">
<div class="spectrum-Examples-item">
<h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">Without icons</h4>
<div class="spectrum-Examples-itemGroup">
<ul class="spectrum-Menu spectrum-Menu--sizeM" role="menu">
<li class="spectrum-Menu-item" role="menuitem" tabindex="0">
<label class="spectrum-Switch-label spectrum-Menu-itemLabel" for="switch-onoff-0">Marquee</label>
<div class="spectrum-Menu-itemActions">
<div class="spectrum-Switch spectrum-Switch--sizeM spectrum-Switch--emphasized spectrum-Menu-itemSwitch">
<input type="checkbox" class="spectrum-Switch-input" id="switch-onoff-0" checked>
<span class="spectrum-Switch-switch"></span>
</div>
</div>
</li>
<li class="spectrum-Menu-item" role="menuitem" tabindex="0">
<label class="spectrum-Switch-label spectrum-Menu-itemLabel" for="switch-onoff-1">Add</label>
<div class="spectrum-Menu-itemActions">
<div class="spectrum-Switch spectrum-Switch--sizeM spectrum-Switch--emphasized spectrum-Menu-itemSwitch">
<input type="checkbox" class="spectrum-Switch-input" id="switch-onoff-1">
<span class="spectrum-Switch-switch"></span>
</div>
</div>
</li>
<li class="spectrum-Menu-item" role="menuitem" tabindex="0">
<label class="spectrum-Switch-label spectrum-Menu-itemLabel" for="switch-onoff-2">Subtract</label>
<div class="spectrum-Menu-itemActions">
<div class="spectrum-Switch spectrum-Switch--sizeM spectrum-Switch--emphasized spectrum-Menu-itemSwitch">
<input type="checkbox" class="spectrum-Switch-input" id="switch-onoff-2">
<span class="spectrum-Switch-switch"></span>
</div>
</div>
</li>
</ul>
</div>
</div>
<div class="spectrum-Examples-item">
<h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">With icons</h4>
<div class="spectrum-Examples-itemGroup">
<ul class="spectrum-Menu spectrum-Menu--sizeM" role="menu">
<li class="spectrum-Menu-item" role="menuitem" tabindex="0">
<label class="spectrum-Switch-label spectrum-Menu-itemLabel" for="switch-onoff-3">
<svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-Menu-itemIcon spectrum-Menu-itemIcon--workflowIcon" focusable="false" aria-hidden="true" aria-label="Selection Icon">
<use xlink:href="#spectrum-icon-18-Selection"></use>
</svg>
Marquee
</label>
<div class="spectrum-Menu-itemActions">
<div class="spectrum-Switch spectrum-Switch--sizeM spectrum-Switch--emphasized spectrum-Menu-itemSwitch">
<input type="checkbox" class="spectrum-Switch-input" aria-labelledby="label4" id="switch-onoff-3" checked>
<span class="spectrum-Switch-switch"></span>
</div>
</div>
</li>
<li class="spectrum-Menu-item" role="menuitem" tabindex="0">
<label class="spectrum-Switch-label spectrum-Menu-itemLabel" for="switch-onoff-4">
<svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-Menu-itemIcon spectrum-Menu-itemIcon--workflowIcon" focusable="false" aria-hidden="true" aria-label="Select Add Icon">
<use xlink:href="#spectrum-icon-18-SelectAdd"></use>
</svg>
Add
</label>
<div class="spectrum-Menu-itemActions">
<div class="spectrum-Switch spectrum-Switch--sizeM spectrum-Switch--emphasized spectrum-Menu-itemSwitch">
<input type="checkbox" class="spectrum-Switch-input" aria-labelledby="label5" id="switch-onoff-4">
<span class="spectrum-Switch-switch"></span>
</div>
</div>
</li>
<li class="spectrum-Menu-item" role="menuitem" tabindex="0">
<label class="spectrum-Switch-label spectrum-Menu-itemLabel" for="switch-onoff-5">
<svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-Menu-itemIcon spectrum-Menu-itemIcon--workflowIcon" focusable="false" aria-hidden="true" aria-label="Select Subtract Icon">
<use xlink:href="#spectrum-icon-18-SelectSubtract"></use>
</svg>
Subtract
</label>
<div class="spectrum-Menu-itemActions">
<div class="spectrum-Switch spectrum-Switch--sizeM spectrum-Switch--emphasized spectrum-Menu-itemSwitch">
<input type="checkbox" class="spectrum-Switch-input" aria-labelledby="label6" id="switch-onoff-5">
<span class="spectrum-Switch-switch"></span>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
Drill-in for submenuContribution
When a menu item contains a submenu, a drill-in chevron will appear at the end of the menu item to show that a submenu is available. See the guidelines for more info on how to display submenus.
- Deselect
- Select Inverse
- Feather really long item
- Select and Mask...
- Save Selection
Show markup
<div class="spectrum-Examples">
<div class="spectrum-Examples-item">
<ul class="spectrum-Menu spectrum-Menu--sizeM" 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 spectrum-Menu-item--drillIn is-open" role="menuitem" tabindex="0">
<span class="spectrum-Menu-itemLabel">Feather really long item</span>
<svg class="spectrum-Icon spectrum-Icon--sizeM 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>
</div>
</div>
Custom Properties API
This component can be modified via its --mod-* prefixed custom properties. A list of those prefixed custom properties can be found here.
Migration Guide
T-shirt sizing
Menu now supports t-shirt sizing and requires that you specify the size by adding a .spectrum-Menu--size* class.
Use small divider classes
When using a section divider, add .spectrum-Divider and spectrum-Divider--sizeS classes to spectrum-Menu-divider. The divider has also changed from medium to small.
Change workflow icon size to medium
Please replace .spectrum-Icon--sizeS with .spectrum-Icon--sizeM.