Menus

Action menu

<details data-trigger open>
  <summary>Account menu</summary>
  <menu>
    <li><a href="/dragonglass/forms.html">Profile settings</a></li>
    <li><button type="button">Sign out</button></li>
  </menu>
</details>

Menu positions

The top and right tokens change the default bottom-left placement. Their combination opens the menu above the trigger and aligns it to the right edge.

<details data-trigger>
  <summary>Top menu</summary>
  <menu data-menu="top">
    <li>
      <a href="/dragonglass/forms.html">Profile settings</a>
      <button type="button" aria-label="Add profile to favorites">
        <i class="material-icons" aria-hidden="true">star</i>
      </button>
    </li>
  </menu>
</details>
<details data-trigger>
  <summary>Right menu</summary>
  <menu data-menu="right">
    <li>
      <a href="/dragonglass/forms.html">Profile settings</a>
      <button type="button" aria-label="Add profile to favorites">
        <i class="material-icons" aria-hidden="true">star</i>
      </button>
    </li>
  </menu>
</details>
<details data-trigger>
  <summary>Top-right menu</summary>
  <menu data-menu="top right">
    <li>
      <a href="/dragonglass/forms.html">Profile settings</a>
      <button type="button" aria-label="Add profile to favorites">
        <i class="material-icons" aria-hidden="true">star</i>
      </button>
    </li>
  </menu>
</details>

Motion and accessibility

Starting styles, inert CSS interactivity, and the native details content pseudo-element reveal the menu from opacity: 0 andscale(.98). The open state uses opacity: 1 andscale(1). During close, the content remains visible for the animation while its actions stay inactive.

Reduced motion changes the menu state without a transition or transform. Native details and summary provide keyboard operation. Every icon-only action has an accessible name.

API