Theme

Navigation

Theme
<m-popover-menu> 1 SLOTS 2 PROPS
overview examples properties methods events slots css parts

A positioned popover menu using native Popover API with Floating UI positioning

Basic Usage

Profile Settings Logout
Code 
<button id="basic-trigger" popovertarget="basic-menu">Open Menu</button>
<m-popover-menu id="basic-menu" popover anchor="basic-trigger">
  <a href="#profile">Profile</a>
  <a href="#settings">Settings</a>
  <a href="#logout">Logout</a>
</m-popover-menu>

Context Menu

Code 
<button id="ctx-trigger" popovertarget="ctx-menu">Actions ⋮</button>
<m-popover-menu id="ctx-menu" popover anchor="ctx-trigger">
  <button type="button">Edit</button>
  <button type="button">Delete</button>
  <button type="button">Share</button>
</m-popover-menu>

With Custom Role

This is a help dialog, not a menu.
Code 
<button id="help-trigger" popovertarget="help-menu">
  <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M12 16v-4"/><path d="M12 8h.01"/></svg>
  Help
</button>
<m-popover-menu id="help-menu" popover anchor="help-trigger" role="dialog">
  <p>This is a help dialog, not a menu.</p>
</m-popover-menu>
NAMETYPEDEFAULT
anchor string —
ID of anchor element
adoptedStyleSheets array [baseStyleSheet]
NAMERETURNS
NAMEDETAIL TYPE
NAME
(default)
Default slot for popover content
NAME
Open palette