The menu (.menu) is a floating list of actionable items — labels, item groups, keyboard shortcuts, a destructive-action variant, and separators — anchored to a trigger element. A menu is built from two parts: a .menu-anchor wrapper (which owns the positioning and is what .toggle-target/aria-controls targets) and the .menu list itself nested inside it.

<div class="menu-anchor" id="menu-demo">
  <button type="button" class="btn btn-outline toggle-target" aria-controls="menu-demo"
          aria-haspopup="menu" aria-expanded="false">
    <span class="btn-label">Account</span>
  </button>
  <ul class="menu" role="menu" hidden>
    <li class="menu-label" role="presentation">Account</li>
    <li role="presentation">
      <button type="button" class="menu-item action-select" id="menu-demo-profile" role="menuitem">
        <span class="menu-item-icon" aria-hidden="true">👤</span>
        <span class="menu-item-label">Profile</span>
        <span class="menu-item-shortcut">⌘P</span>
      </button>
    </li>
    <li role="separator"><hr class="menu-separator"></li>
    <li role="presentation">
      <button type="button" class="menu-item menu-item-destructive action-select" id="menu-demo-signout" role="menuitem">
        <span class="menu-item-label">Sign out</span>
      </button>
    </li>
  </ul>
</div>

Menu