← →

Dropdown Menu

A native component (Web Component) that displays an action menu anchored to a trigger, built on the native Popover API (top layer, light dismiss, and ESC included) with CSS anchor positioning. Use it to group contextual actions triggered by a button, such as "more options" menus, row actions, or profile menus. It supports arrow-key navigation, Home/End, Enter/Space, and items with an icon, shortcut, and disabled state.

Preview

<pura-dropdown-menu>
  <button slot="trigger">Options</button>

  <pura-menu-label>Account</pura-menu-label>
  <pura-menu-item>
    Profile
    <span slot="shortcut">Ctrl P</span>
  </pura-menu-item>
  <pura-menu-item>
    Settings
    <span slot="shortcut">Ctrl ,</span>
  </pura-menu-item>

  <pura-menu-separator></pura-menu-separator>

  <pura-menu-item disabled>Billing</pura-menu-item>
  <pura-menu-item>Sign out</pura-menu-item>
</pura-dropdown-menu>

Attributes

Attribute	Type	Default	Description
`open`	boolean	false	Controls/reflects the open state of the menu; present when the popover is visible.
`disabled`	boolean	false	On <pura-menu-item>: disables the item, preventing selection and focus.

Installation

pura is copy-paste and dependency-free. Load the whole library, or just this component.

HTML

<link rel="stylesheet" href="/pura/tokens.css">
<script type="module" src="/pura/lib/dropdown-menu.js"></script>

JavaScript

import "./pura/lib/dropdown-menu.js";

Slots

triggerdefaulticonshortcut

Events

opencloseselect