• Light
  • Dark
  • Darkest
  • Medium
  • Large
  • LTR
  • RTL
  • Default
  • Express

Action menu

Component status
Contribution
Current version@spectrum-css/actionmenu@6.1.3
ReleasedSeptember 13, 2024
S2-foundations@spectrum-css/actionmenu@7.0.0-s2-foundations.13
ReleasedSeptember 12, 2024

Usage notes


Simply an action button with a Popover. Note that the is-selected class should be applied to the button when the menu is open. Also note the accessibility roles are different for an action menu vs a normal menu.

Variants


Standard
Contribution



Show markup
<button class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-ActionButton--quiet is-selected">
  <svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-ActionButton-icon" focusable="false" aria-hidden="true">
    <use xlink:href="#spectrum-icon-18-More" />
  </svg>
  <span class="spectrum-ActionButton-label">More Actions</span>
</button>
<br>

<div class="spectrum-Popover spectrum-Popover--bottom is-open">
  <ul class="spectrum-Menu" role="menu">
    <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>
    <li class="spectrum-Menu-item" role="menuitem" tabindex="0">
      <span class="spectrum-Menu-itemLabel">Action 4</span>
    </li>
  </ul>
</div>

<div class="dummy-spacing"></div>

<button class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-ActionButton--quiet is-selected">
  <svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-ActionButton-icon" focusable="false" aria-hidden="true">
    <use xlink:href="#spectrum-icon-18-More" />
  </svg>
</button>
<br>

<div class="spectrum-Popover spectrum-Popover--bottom is-open">
  <ul class="spectrum-Menu" role="menu">
    <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>
    <li class="spectrum-Menu-item" role="menuitem" tabindex="0">
      <span class="spectrum-Menu-itemLabel">Action 4</span>
    </li>
  </ul>
</div>

<div class="dummy-spacing"></div>

<button class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-ActionButton--quiet">
  <svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-ActionButton-icon" focusable="false" aria-hidden="true">
    <use xlink:href="#spectrum-icon-18-More" />
  </svg>
  <span class="spectrum-ActionButton-label">More Actions</span>
</button>

Migration Guide


New Action Button markup

Action Button requires .spectrum-ActionButton-icon class on icons nested inside of Action Button.

Change workflow icon size to medium

Replace .spectrum-Icon--sizeS with .spectrum-Icon--sizeM.