Menu Button

Sample:

Code:

<button type="button" aria-haspopup="menu" aria-expanded="false">Settings</button>

<ul role="menu" hidden>
  <li role="none">
    <button role="menuitem">Print</button>
  </li>
  <li role="none">
    <button role="menuitem">Save</button>
  </li>
</ul>

<style>
  [aria-expanded="true"] + ul {
    display: block !important;
  }
</style>

<script>
  const button = document.querySelector('button')

  button.addEventListener('click', e => {
    const isExpanded = button.getAttribute('aria-expanded') === "true"
    button.setAttribute('aria-expanded', !isExpanded)
  })
</script>