Components
DropdownMenu
A popover action menu with arrow-key navigation, typeahead, and focus restoration.
Props
Native attributes and event handlers are forwarded to the root Div component. Common transitions apply to that root.
Theme entries: dropdownMenu,dropdownMenuItem,dropdownMenuList,dropdownMenuPanel.
| Prop | Type | Default | Description |
|---|---|---|---|
children | Snippet | undefined | Custom content; see the usage notes for its component-specific role. |
class | string | '' | Tailwind utilities merged after the component theme and variants. |
element | HTMLDivElement | null | $bindable(null) | Bindable reference to the composition root. |
inTransition | TransitionProps | undefined | Enter transition override. |
isVisible | boolean | $bindable(true) | Bindable visibility state. |
items | MenuItem[] | [] | See usage notes and the component API. |
label | string | 'Options' | See usage notes and the component API. |
onSelect | ((item: MenuItem) => void) | undefined | undefined | See usage notes and the component API. |
open | boolean | $bindable(false) | See usage notes and the component API. |
outTransition | TransitionProps | undefined | Exit transition override. |
theme | Theme | globalTheme | Local Theme instance; defaults to the global theme. |
transition | TransitionProps | [noopTransition, {}] | Shared transition function and options. |
variants | string[] | [] | Ordered component theme variants or cross-component references. |
Default usage
Import DropdownMenu from sveltewind/components. This example shows its default styling in a usable context.
Loading...Use Up/Down, Home/End, or type a label to move through enabled items. Escape returns focus to the trigger. Tab closes the menu and continues navigation. children replaces the trigger label content.
Examples
Theme variants
Every variant available for DropdownMenu in the built-in themes is shown below.
full — Apply the full variant.
Loading...compact — Apply the compact variant.
Loading...spacious — Apply the spacious variant.
Loading...Class overrides
Apply rounded-xl border border-primary-500/40 p-4 locally.
Loading...Props and behavior
Bind isVisible and toggle it with a button to control whether the component is rendered.
Loading...Content and values
Provide different text, child content, or definitions inside the required parent context.
Loading...