Actions & Overlays

Dropdown Menu

A button-triggered menu following the WAI-ARIA menu pattern.

stableEnhancer: enhanceDropdownBuilt on <button> + <ul>hydrateless/dropdown.css

A button-triggered menu following the WAI-ARIA menu pattern. The enhancer adds keyboard navigation, typeahead, viewport-aware placement, and aria-expanded/role wiring.

Dropdown

Open with click or ↓, then navigate with the arrow keys and typeahead.

Live

JavaScript

This component ships an optional enhancer. With auto-init it loads automatically; to wire it yourself, import it directly:

import { enhanceDropdown } from '@hydrateless/enhancers/dropdown';

const handle = enhanceDropdown(container, { defaultOpen, onOpenChange, onSelect });
// handle.api  -> imperative controls
// handle.destroy()  -> tear everything down

Props

The framework bindings expose these props (and forward the rest to the root element).

Prop	Type	Default	Description
onSelect	(value: string) => void	—	Fires with the selected item value.
defaultOpen	boolean	false	Open on mount.

Events and callbacks

Event / Callback	Payload	Description
hl:select	{ value: string }	Cancelable CustomEvent carrying the item's `data-hl-value` (or text).

CSS variables

Override these on any ancestor to theme the component. See the theme studio to preview changes live.

CSS variable	Used for
--hl-surface	Menu background.
--hl-border	Menu border.
--hl-shadow-md	Menu elevation.

Accessibility

• The trigger exposes aria-haspopup and aria-expanded; the list is role="menu".
• Arrow keys, Home/End, typeahead, and Esc to close are all handled.

Related

MenuA menubar with single-level submenus.PopoverFloating content anchored to a trigger.ComboboxAn editable input paired with a filterable listbox.