Split Button

<!--
  Two buttons, one visual unit. The default action is a plain button - it must
  stay one tab stop and one Enter away. The toggle is a separate button with its
  own accessible name, because "Save" and "more Save options" are two different
  actions and a screen reader has to be able to tell them apart.
-->
<div class="split-btn">
  <button class="split-btn__action" type="button">Save</button>
  <button
    class="split-btn__toggle"
    type="button"
    aria-haspopup="menu"
    aria-expanded="false"
    aria-controls="split-btn-menu"
    aria-label="More save options"
  >
    <svg class="split-btn__chevron" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false">
      <path d="m6 9 6 6 6-6" />
    </svg>
  </button>
  <ul class="split-btn__menu" id="split-btn-menu" role="menu" hidden>
    <li role="none"><button class="split-btn__item" type="button" role="menuitem">Save and duplicate</button></li>
    <li role="none"><button class="split-btn__item" type="button" role="menuitem">Save as template</button></li>
    <li role="none"><button class="split-btn__item" type="button" role="menuitem">Save and close</button></li>
  </ul>
</div>

<script>
  document.querySelectorAll('.split-btn').forEach(function (root) {
    var toggle = root.querySelector('.split-btn__toggle');
    var menu = root.querySelector('.split-btn__menu');
    var items = Array.prototype.slice.call(root.querySelectorAll('.split-btn__item'));

    function setOpen(open) {
      menu.hidden = !open;
      toggle.setAttribute('aria-expanded', String(open));
    }

    toggle.addEventListener('click', function () {
      var open = toggle.getAttribute('aria-expanded') === 'true';
      setOpen(!open);
      if (!open && items[0]) items[0].focus();
    });

    // Arrow keys move between items, Escape closes and returns focus to the
    // toggle - without this the menu is a mouse-only control.
    root.addEventListener('keydown', function (event) {
      if (event.key === 'Escape') {
        setOpen(false);
        toggle.focus();
        return;
      }
      if (event.key !== 'ArrowDown' && event.key !== 'ArrowUp') return;
      var index = items.indexOf(document.activeElement);
      if (index === -1) return;
      event.preventDefault();
      var next = event.key === 'ArrowDown' ? index + 1 : index - 1;
      items[(next + items.length) % items.length].focus();
    });

    // Clicking away closes it, matching every native menu on the platform.
    document.addEventListener('click', function (event) {
      if (!root.contains(event.target)) setOpen(false);
    });
  });
</script>