Submenu
A nested menu that opens to the side of a parent menu item. Built with the native Popover API — no JavaScript required.
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>