Submenu

A nested menu that opens to the side of a parent menu item. Built with the native Popover API. No JavaScript.

Composed of

Menu: The parent and nested lists of items
Popover: The panel the nested menu opens in
Button: The item that opens the submenu

Standalone

<link rel="stylesheet" href="https://esm.sh/@erikt/ui/submenu.css" />

Default

<button popovertarget="edit-menu">Edit</button>

<div id="edit-menu" popover>
  <menu>
    <li><button class="ghost">Cut</button></li>
    <li><button class="ghost">Copy</button></li>
    <li><button class="ghost">Paste</button></li>
    <li>
      <button class="ghost" popovertarget="find-menu">Find</button>
      <div id="find-menu" popover data-placement="right top">
        <menu>
          <li><button class="ghost">Find…</button></li>
          <li><button class="ghost">Find Next</button></li>
          <li><button class="ghost">Find Previous</button></li>
        </menu>
      </div>
    </li>
  </menu>
</div>

Nested

Submenus can be nested to any depth.

<button popovertarget="format-menu">Format</button>

<div id="format-menu" popover>
  <menu>
    <li><button class="ghost">Bold</button></li>
    <li><button class="ghost">Italic</button></li>
    <li>
      <button class="ghost" popovertarget="lists-menu">Lists</button>
      <div id="lists-menu" popover data-placement="right top">
        <menu>
          <li><button class="ghost">Bullet List</button></li>
          <li><button class="ghost">Numbered List</button></li>
          <li>
            <button class="ghost" popovertarget="indent-menu">Indent</button>
            <div id="indent-menu" popover data-placement="right top">
              <menu>
                <li><button class="ghost">Increase</button></li>
                <li><button class="ghost">Decrease</button></li>
              </menu>
            </div>
          </li>
        </menu>
      </div>
    </li>
  </menu>
</div>