• Light
  • Dark
  • Darkest
  • Medium
  • Large
  • LTR
  • RTL
  • Default
  • Express
Component status
Contribution
Last releasedNovember 9, 2023
Current version@spectrum-css/menu@5.1.3

Variants


Sizing
Contribution

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" 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 Icons
Contribution

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" 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

Menu with descriptions

Menu with icons & descriptions

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 overflow
Contribution

Menu without descriptions

Menu with descriptions

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 descriptions
Contribution

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" 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 icons
Contribution

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" 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>

Collapsible
Contribution

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 dividers
Contribution

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 dividers
Contribution

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 Selection
Contribution

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-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-Selection
Contribution

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 Switch
Contribution

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 submenu
Contribution

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.

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.