Dropdown Menu
kumo-svelte

Dropdown Menu

Displays a menu to the user—such as a set of actions or functions—triggered by a button.

Installation

Barrel

import { DropdownMenu } from 'kumo-svelte';

Granular

import { DropdownMenu } from 'kumo-svelte/components/dropdown-menu';

Usage

<script>  import { DropdownMenu, Button } from "kumo-svelte";</script><DropdownMenu>  <DropdownMenu.Trigger>    {#snippet child({ props })}      <Button {...props}>Menu</Button>    {/snippet}  </DropdownMenu.Trigger>  <DropdownMenu.Content>    <DropdownMenu.Item onSelect={() => console.log("edit")}>      Edit    </DropdownMenu.Item>    <DropdownMenu.Item onSelect={() => console.log("duplicate")}>      Duplicate    </DropdownMenu.Item>    <DropdownMenu.Separator />    <DropdownMenu.Item      variant="danger"      onSelect={() => console.log("delete")}    >      Delete    </DropdownMenu.Item>  </DropdownMenu.Content></DropdownMenu>

Examples

Basic Dropdown

Inset Items

Use inset on items without an icon to align their text with items that have one.

Handling Item Clicks

Use onSelect on DropdownMenu.Item to handle actions. Each item receives a standard menu select event handler.

Checkbox Items

Use DropdownMenu.CheckboxItem for toggleable options that can be independently checked or unchecked.

Nested Menu with Radio Selection

Use DropdownMenu.Sub, DropdownMenu.SubTrigger, and DropdownMenu.SubContent to create nested submenus. For single-selection lists like language or timezone, use DropdownMenu.RadioGroup and DropdownMenu.RadioItem.

Custom Trigger with Avatar

Use the child snippet to customize the trigger element while passing children to render inside it. This is useful when you need a non-button trigger (like an avatar) wrapped in an accessible button element.

Use DropdownMenu.LinkItem for menu items that navigate to a URL. This renders a semantic <a> element with full control over link attributes like target and rel.

API Reference

Root component that manages the dropdown state.

PropTypeDefaultDescription
children Snippet-Child snippet rendered by the component.
open booleanfalseControlled open state.
onOpenChange (open: boolean) => void-Called when open state changes.

Button that opens the dropdown when clicked.

PropTypeDefaultDescription
child Snippet<[{ props: Record<string, unknown> }]>-child prop.
type 'button' | 'submit' | 'reset'"button"Element or semantic type.

Individual menu item for actions.

PropTypeDefaultDescription
href string-Deprecated destination URL for legacy link items.
icon Component-Icon rendered by the component.
variant 'default' | 'danger'"default"Visual variant.
selected booleanfalseShows a trailing selected check indicator.
inset booleanfalseIndents the item content.
disabled boolean-Disables the component.

A menu item that navigates to a URL. Renders a semantic <a> element. Use this instead of Item for navigation links.

PropTypeDefaultDescription
href string-Deprecated destination URL for legacy link items.
icon Component-Icon rendered by the component.
variant 'default' | 'danger'"default"Visual variant.
selected booleanfalseShows a trailing selected check indicator.
inset booleanfalseIndents the item content.
disabled boolean-Disables the component.

A menu item that can be toggled on or off. Use for independent boolean options.

PropTypeDefaultDescription
checked booleanfalseChecked state.
onCheckedChange (checked: boolean) => void-Called when checked changes.

Root component for a nested submenu. Wrap SubTrigger and SubContent inside this.

PropTypeDefaultDescription
open booleanfalseControlled open state.
onOpenChange (open: boolean) => void-Called when open state changes.

Menu item that opens a nested submenu when hovered or clicked. Displays a caret icon automatically.

PropTypeDefaultDescription
icon Component-Icon rendered by the component.
inset booleanfalseIndents the item content.

Container for submenu items. Positioned relative to the SubTrigger.

PropTypeDefaultDescription
sideOffset number8Distance from the anchor.
side 'top' | 'right' | 'bottom' | 'left'-Preferred floating side.
align 'start' | 'center' | 'end'-Floating alignment.
container HTMLElement | stringdocument.bodyPortal container for custom roots or Shadow DOM.

A visual divider between menu items.

PropTypeDefaultDescription
No component-specific props. Accepts standard HTML attributes.

Groups radio items for single-selection behavior. Only one item can be selected at a time.

PropTypeDefaultDescription
No component-specific props. Accepts standard HTML attributes.

A menu item that works like a radio button. Must be used inside a RadioGroup.

PropTypeDefaultDescription
value *string-Controlled value.
icon Component-Icon rendered by the component.
inset booleanfalseIndents the item content.

Shows the selected state for a RadioItem. Displays a checkmark by default.

PropTypeDefaultDescription
No component-specific props. Accepts standard HTML attributes.