Popover API

Baseline 2024 Reference ↗

The popover attribute creates non-modal top-layer UI with light dismiss and Escape handling. Small menus and panels often need no overlay script at all.

<button popovertarget="menu">Menu</button>

<nav id="menu" popover>
  <a href="/about">About</a>
  <a href="/suggest">Contribute</a>
</nav>  

A popover is non-modal. Use <dialog> when the rest of the page must become inactive, and give every trigger and control a clear accessible name.