An ARIA menu with roving focus, separators, danger items, and a trigger snippet that spreads onto your own button.
OpenDanger itemDisabled item
<DropdownMenu {items} label="Widget actions"> {#snippet trigger(props)} <Button variant="ghost" chevron {...props}>Actions</Button> {/snippet}</DropdownMenu>Installation
pnpm add @chanrg/4uiImport the stylesheet once, at the root of your app:
import '@chanrg/4ui/styles.css';Usage
import { DropdownMenu } from '@chanrg/4ui';<DropdownMenu {items} label="Widget actions"> {#snippet trigger(props)} <Button variant="ghost" chevron {...props}>Actions</Button> {/snippet}</DropdownMenu>API reference
Props
| Prop | Type | Default | Description |
|---|---|---|---|
items | DropdownMenuItem[] | [] | Items with id, label, icon, danger, disabled — or separators. |
trigger | Snippet<[TriggerProps]> | icon button | Spread the provided props onto your trigger. |
onselect | (id) => void | — | Fires with the chosen item id. |
CSS variables
| Variable | Description |
|---|---|
--4ui-surface | Primary component surface. |
--4ui-text | Primary foreground color. |
--4ui-border | Default control and panel border. |
Accessibility
- role="menu"/"menuitem" with ArrowUp/Down/Home/End roving focus.
- Escape closes and returns focus to the trigger.