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-menubar

Horizontal / vertical bar of dropdown triggers with roving tabindex. Slotted children are <hp-dropdown-menu> instances (or any element with role="menuitem" + aria-haspopup="menu"). Arrow keys move focus between bar entries; Home / End jump.

Examples API Intent Changelog File New Open Save Edit Undo Redo Find View Zoom in Zoom out <body> <hp-menubar> <hp-dropdown-menu> <hp-button>File</hp-button> <hp-menu-item slot="content">New</hp-menu-item> <hp-menu-item slot="content">Open</hp-menu-item> </hp-dropdown-menu> <hp-dropdown-menu> <hp-button>Edit</hp-button> <hp-menu-item slot="content">Undo</hp-menu-item> </hp-dropdown-menu> </hp-menubar> </body>

Install

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

Properties

Property Attribute Type Default Description
orientation orientation "horizontal" | "vertical" "horizontal" Layout direction — controls arrow-key axis.

Slots

Slot Description
(default) hp-dropdown-menu children (or any [role="menuitem"] triggers)

Accessibility

Bar exposes role="menubar" + aria-orientation. Only the first trigger is in the tab order initially; arrow keys move focus between siblings; Home / End jump to first / last. The individual dropdowns handle their own menuitem nav.

No per-component entries in CHANGELOG.md yet.

esc
↑ ↓ navigate ↵ open esc close