budibase/packages/standard-components/node_modules/@spectrum-css/menu/metadata/menu.yml

name: Menu
SpectrumSiteSlug: https://spectrum.adobe.com/page/side-navigation/
section:
  - name: Migration Guide
    description: |
      ### Change workflow icon size to medium
      Please replace `.spectrum-Icon--sizeS` with `.spectrum-Icon--sizeM`.      
examples:
  - id: selectlist
    name: Standard
    markup: |
      <div style="display: flex; align-items: flex-start; justify-content: space-around;">

        <ul class="spectrum-Menu" role="menu">
          <li class="spectrum-Menu-item" role="menuitem" tabindex="0">
            <span class="spectrum-Menu-itemLabel">Deselect</span>
          </li>
          <li class="spectrum-Menu-item" role="menuitem" tabindex="0">
            <span class="spectrum-Menu-itemLabel">Select Inverse</span>
          </li>
          <li class="spectrum-Menu-item" role="menuitem" tabindex="0">
            <span class="spectrum-Menu-itemLabel">Feather...</span>
          </li>
          <li class="spectrum-Menu-item" role="menuitem" tabindex="0">
            <span class="spectrum-Menu-itemLabel">Select and Mask...</span>
          </li>
          <li class="spectrum-Menu-divider" role="separator"></li>
          <li class="spectrum-Menu-item" role="menuitem" tabindex="0">
            <span class="spectrum-Menu-itemLabel">Save Selection</span>
          </li>
          <li class="spectrum-Menu-item is-disabled" role="menuitem" aria-disabled="true">
            <span class="spectrum-Menu-itemLabel">Make Work Path</span>
          </li>
        </ul>

        <ul class="spectrum-Menu" role="menu">
          <li role="presentation">
            <span class="spectrum-Menu-sectionHeading" id="menu-heading-category-1"  aria-hidden="true">Section Heading</span>
            <ul class="spectrum-Menu" role="group" aria-labelledby="menu-heading-category-1">
              <li class="spectrum-Menu-item" role="menuitem" tabindex="0">
                <span class="spectrum-Menu-itemLabel">Action 1</span>
              </li>
              <li class="spectrum-Menu-item" role="menuitem" tabindex="0">
                <span class="spectrum-Menu-itemLabel">Action 2</span>
              </li>
              <li class="spectrum-Menu-item" role="menuitem" tabindex="0">
                <span class="spectrum-Menu-itemLabel">Action 3</span>
              </li>
            </ul>
          </li>
          <li class="spectrum-Menu-divider" role="separator"></li>
          <li role="presentation">
            <span class="spectrum-Menu-sectionHeading" id="menu-heading-category-2"  aria-hidden="true">Section Heading</span>
            <ul class="spectrum-Menu" role="group" aria-labelledby="menu-heading-category-1" aria-disabled="true">
              <li class="spectrum-Menu-item" role="menuitem" tabindex="0">
                <svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-Menu-itemIcon" focusable="false" aria-hidden="true" aria-label="SaveFloppy">
                  <use xlink:href="#spectrum-icon-18-SaveFloppy"></use>
                </svg>
                <span class="spectrum-Menu-itemLabel">Save</span>
              </li>
              <li class="spectrum-Menu-item is-disabled" role="menuitem" aria-disabled="true">
                <svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-Menu-itemIcon" focusable="false" aria-hidden="true" aria-label="DataDownload">
                  <use xlink:href="#spectrum-icon-18-DataDownload"></use>
                </svg>
                <span class="spectrum-Menu-itemLabel">Download</span>
              </li>
            </ul>
          </li>
        </ul>

        <ul class="spectrum-Menu" role="listbox">
          <li role="presentation">
            <span class="spectrum-Menu-sectionHeading" id="menu-heading-sf" aria-hidden="true">San Francisco</span>
            <ul class="spectrum-Menu" role="group" aria-labelledby="menu-heading-sf">
              <li class="spectrum-Menu-item" role="option" aria-selected="true" tabindex="0">
                <span class="spectrum-Menu-itemLabel">Financial District</span>
              </li>
              <li class="spectrum-Menu-item" role="option" tabindex="0">
                <span class="spectrum-Menu-itemLabel">South of Market</span>
              </li>
              <li class="spectrum-Menu-item" role="option" tabindex="0">
                <span class="spectrum-Menu-itemLabel">North Beach</span>
              </li>
            </ul>
          </li>
          <li class="spectrum-Menu-divider" role="separator"></li>
          <li role="presentation">
            <span class="spectrum-Menu-sectionHeading" id="menu-heading-oak" aria-hidden="true">Oakland</span>
            <ul class="spectrum-Menu" role="group" aria-labelledby="menu-heading-oak">
              <li class="spectrum-Menu-item" role="option" tabindex="0">
                <span class="spectrum-Menu-itemLabel">City Center</span>
              </li>
              <li class="spectrum-Menu-item is-disabled" role="option">
                <span class="spectrum-Menu-itemLabel">Jack London Square</span>
              </li>
              <li class="spectrum-Menu-item is-selected" role="option" tabindex="0">
                <span class="spectrum-Menu-itemLabel">My best friend's mom's house in the burbs just off Silverado street</span>
                <svg class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Menu-checkmark spectrum-Menu-itemIcon" focusable="false" aria-hidden="true">
                  <use xlink:href="#spectrum-css-icon-Checkmark100" />
                </svg>
              </li>
            </ul>
          </li>
        </ul>

      </div>      
  - id: selectlist
    name: Nested
    markup: |
      <div style="position: relative; height: 260px;">

        <ul class="spectrum-Menu" role="menu">
          <li class="spectrum-Menu-item" role="menuitem" tabindex="0">
            <span class="spectrum-Menu-itemLabel">Deselect</span>
          </li>
          <li class="spectrum-Menu-item" role="menuitem" tabindex="0">
            <span class="spectrum-Menu-itemLabel">Select Inverse</span>
          </li>
          <li class="spectrum-Menu-item is-open" role="menuitem" tabindex="0">
            <span class="spectrum-Menu-itemLabel">Feather...</span>
            <svg class="spectrum-Icon spectrum-UIIcon-ChevronRight100 spectrum-Menu-chevron spectrum-Menu-itemIcon" focusable="false" aria-hidden="true" aria-label="Next">
              <use xlink:href="#spectrum-css-icon-Chevron100" />
            </svg>
          </li>
          <li class="spectrum-Menu-item" role="menuitem" tabindex="0">
            <span class="spectrum-Menu-itemLabel">Select and Mask...</span>
          </li>
          <li class="spectrum-Menu-item" role="menuitem" tabindex="0">
            <span class="spectrum-Menu-itemLabel">Save Selection</span>
          </li>
        </ul>

        <ul class="spectrum-Menu" role="menu">
          <li class="spectrum-Menu-item" role="menuitem" tabindex="0">
            <span class="spectrum-Menu-itemLabel">Deselect</span>
          </li>
          <li class="spectrum-Menu-item" role="menuitem" tabindex="0">
            <span class="spectrum-Menu-itemLabel">Select and Mask...</span>
          </li>
        </ul>

      </div>