Hexpunk
InstallConceptsElementsProsehp-cellhp-codehp-copyhp-hexhp-latexhp-visually-hiddenhp-buttonhp-checkboxhp-formhp-labelhp-radiohp-selecthp-sliderhp-togglehp-toggle-grouphp-badgehp-taghp-progresshp-spinnerhp-backgroundhp-clusterhp-collapsiblehp-demohp-gridhp-scroll-areahp-separatorhp-sidebarhp-toolbarhp-avatarhp-iconhp-pixelhp-linkhp-menubarhp-navigation-menuhp-tabshp-alert-dialoghp-context-menuhp-dialoghp-dropdown-menuhp-hover-cardhp-popoverhp-tooltiphp-bannerhp-toasthp-tetherhp-module-handlehp-unfold-listhp-unfold-overlayhp-unfold-pagehp-bondhp-link-nodePaletteAnimationsReleases

hp-dropdown-menu

Click-triggered menu with role="menu" + slotted <hp-menu-item> children. Arrow keys move focus between items; Home / End jump; Enter / Space activate; Escape dismiss.

Examples API Intent Changelog actions edit duplicate share archive <body> <hp-dropdown-menu side="bottom" align="start"> <hp-button>actions</hp-button> <hp-menu-item slot="content">edit</hp-menu-item> <hp-menu-item slot="content">duplicate</hp-menu-item> <hp-menu-item slot="content">share</hp-menu-item> <hp-menu-item slot="content" disabled>archive</hp-menu-item> </hp-dropdown-menu> <script> document.querySelector("hp-dropdown-menu") .addEventListener("hp-menu-select", (ev) => { console.log(ev.detail.value); // "edit", "duplicate", ... }); </script> </body>

Install

bun add @hexpunk/core lit
import "@hexpunk/core";

Properties

Property Attribute Type Default Description
side side FloatingSide "bottom"
align align FloatingAlign "start"
offset offset number 6
open open boolean false

Events

Event Type Description
hp-dropdown-open CustomEvent When the menu opens
hp-dropdown-close CustomEvent When the menu closes
hp-menu-select Event When a menuitem is activated. detail: { value, item }

Slots

Slot Description
(default) Trigger element (first child)
content hp-menu-item children

CSS Parts

Part Description
menu The floating menu container

Accessibility

Trigger auto-stamps aria-haspopup="menu" + aria-expanded. Menu exposes role="menu"; items role="menuitem". First non- disabled item receives focus on open. Selection closes the menu and restores focus to the trigger.

No per-component entries in CHANGELOG.md yet.

esc
↑ ↓ navigate ↵ open esc close