Studio
2

Dropdown Menu

Installation

pnpm dlx @mielui/svelte add dropdown-menu

Usage

Separators span the inner panel width, including submenus. Menu items retain their padding.

Use Arrow keys, Home, End, or type a label to move between enabled items. Submenus support directional keyboard navigation. Items close the menu after selection; an onclick handler can call event.preventDefault() to cancel selection and dismissal. Bind checked or value to retain selections outside the mounted menu.

import * as DropdownMenu from '$lib/mielui/components/dropdown-menu';
import Kbd from '$lib/mielui/components/kbd';

<DropdownMenu.Root>
  <DropdownMenu.Trigger>Menu</DropdownMenu.Trigger>
  <DropdownMenu.Content>
    <DropdownMenu.Item callback={handleClick}>
      Action
      <Kbd shortcut="cmd+K" />
    </DropdownMenu.Item>
  </DropdownMenu.Content>
</DropdownMenu.Root>

Examples

Basic menu

Grouped items

Row actions

Share menu

Sort menu

Configuration submenu

Nested choices for configuring a model, effort level, and response speed.

Dynamic width

Menus and submenus size to their longest item plus a buffer instead of hugging the trigger.

Borders

Set chrome.borders to "single" or "double" in your theme. Double is the default. This example overrides the generated inset token locally so you can compare both styles.

Glass surface

Set surface="glass" on DropdownMenu.Content for a translucent background with blur. Without a surface prop, the component follows --mielui-surface. An unset variable keeps it solid; surface="solid" overrides a global glass theme. The glass surface keeps an opaque fallback when backdrop filtering is unavailable and respects reduced-transparency preferences.

API reference

DropdownMenu.Root

Provides dropdown menu state.

Prop Type Default
open Bindable boolean | undefined false
onOpenChange ((open: boolean) => void) | undefined —
children Snippet<[]> | undefined —

DropdownMenu.CheckboxItem

Prop Type Default
checked Bindable boolean | undefined false
onCheckedChange ((checked: boolean) => void) | undefined —
children Snippet<[]> | undefined —
element Bindable HTMLButtonElement | HTMLAnchorElement | undefined —
class (string & (ClassValue | null)) | undefined —

DropdownMenu.Content

Renders the menu surface.

Prop Type Default
children Required Snippet<[]> —
class string | undefined —
dynamic boolean | undefined false
tabindex number | undefined -1
role "none" | "alertdialog" | "dialog" | "listbox" | "menu" | undefined 'menu'
surface "solid" | "glass" | undefined —
allowClickOutside boolean | undefined true
dismissLayer boolean | undefined

Render the full-viewport dismiss layer under the panel while open. Defaults to `true`. Set to `false` for triggers that must stay clickable while open (e.g. an input-style combobox trigger); outside pointer dismissal still applies via `allowClickOutside`.

 true
portal boolean | undefined true
refElement VirtualElement | undefined —
focusTrap boolean | undefined

Trap Tab focus inside the panel while open. Defaults to `true`.

 false
lockScroll boolean | undefined

Lock document scrolling while the panel is open. Defaults to `true`.

 false

DropdownMenu.Item

Renders a menu action.

Prop Type Default
callback (() => void) | undefined —
disabled boolean | undefined false
variant ButtonVariant | undefined —
size "sm" | "md" | "lg" | "icon" | undefined —
children Snippet<[]> | undefined —
element Bindable HTMLButtonElement | HTMLAnchorElement | undefined

Bindable reference to the rendered DOM element. Type is the union of the two possible element types -- narrow at the use site:

 —
unstyled boolean | undefined

Skip the variant/size base classes and render with `class` alone.

 —
status ButtonStatus | undefined

Controlled visual state. Loading remains focusable and refuses activation.

 —
loading boolean | undefined

Convenience alias for `status="loading"`.

 —
loadingLabel string | undefined —
successLabel string | undefined —
errorLabel string | undefined —
onclick ((event: MouseEvent) => void) | undefined —
onkeydown ((event: KeyboardEvent) => void) | undefined —
href string | undefined —

DropdownMenu.Label

Labels a menu section.

Prop Type Default
children Required Snippet<[]> —
class string | undefined —

DropdownMenu.RadioGroup

Prop Type Default
value Bindable string | undefined ''
onValueChange ((value: string) => void) | undefined —
children Snippet<[]> | undefined —

DropdownMenu.RadioItem

Prop Type Default
value Required string | (string & string[]) —
children Snippet<[]> | undefined —
element Bindable HTMLButtonElement | HTMLAnchorElement | undefined —
class (string & (ClassValue | null)) | undefined —

DropdownMenu.Separator

Separates menu items.

Prop Type Default
children Snippet<[]> | undefined —
class string | undefined —

DropdownMenu.Sub

Provides submenu state.

Prop Type Default
children Snippet<[]> | undefined —

DropdownMenu.SubContent

Renders a submenu surface.

Prop Type Default
surface "solid" | "glass" | undefined —
children Required Snippet<[]> —
class string | undefined —
dynamic boolean | undefined false

DropdownMenu.SubTrigger

Opens a submenu.

Prop Type Default
class string | undefined —
children Snippet<[]> | undefined —
style string | undefined —
onclick ((event: MouseEvent) => void) | undefined —
variant ButtonVariant | undefined —
size "sm" | "md" | "lg" | "icon" | undefined —
element HTMLButtonElement | HTMLAnchorElement | undefined —
unstyled boolean | undefined

Forwarded to Button: render with `class` alone, skipping variant/size.

 —
icon boolean | undefined —
onopen (() => void) | undefined

Called immediately before this trigger opens its popover.

 —

DropdownMenu.Trigger

Opens the dropdown menu.

Prop Type Default
children Required Snippet<[]> —
class string | undefined —
variant ButtonVariant | undefined —
style string | undefined —
onclick ((event: MouseEvent) => void) | undefined —
size "sm" | "md" | "lg" | "icon" | undefined —
element HTMLButtonElement | HTMLAnchorElement | undefined —
unstyled boolean | undefined

Forwarded to Button: render with `class` alone, skipping variant/size.

 —
icon boolean | undefined —
onopen (() => void) | undefined

Called immediately before this trigger opens its popover.

 —