120k
New

Dropdown Menu

PreviousNext

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

Installation

pnpm dlx shadcn@latest add @force-ui-svelte/dropdown-menu

Usage

<script lang="ts">
  import * as DropdownMenu from "$lib/components/ui/dropdown-menu/index.js";
</script>
<DropdownMenu.Root>
  <DropdownMenu.Trigger>Open</DropdownMenu.Trigger>
  <DropdownMenu.Content>
    <DropdownMenu.Group>
      <DropdownMenu.Label>My Account</DropdownMenu.Label>
      <DropdownMenu.Separator />
      <DropdownMenu.Item>Profile</DropdownMenu.Item>
      <DropdownMenu.Item>Billing</DropdownMenu.Item>
      <DropdownMenu.Item>Team</DropdownMenu.Item>
      <DropdownMenu.Item>Subscription</DropdownMenu.Item>
    </DropdownMenu.Group>
  </DropdownMenu.Content>
</DropdownMenu.Root>

Composition

Use the following composition to build a DropdownMenu:

DropdownMenu.Root
├── DropdownMenu.Trigger
└── DropdownMenu.Content
    ├── DropdownMenu.Group
    │   ├── DropdownMenu.Label
    │   ├── DropdownMenu.Item
    │   └── DropdownMenu.Item
    ├── DropdownMenu.Separator
    ├── DropdownMenu.Group
    │   ├── DropdownMenu.Label
    │   ├── DropdownMenu.CheckboxItem
    │   └── DropdownMenu.CheckboxItem
    ├── DropdownMenu.Separator
    ├── DropdownMenu.Group
    │   ├── DropdownMenu.Label
    │   └── DropdownMenu.RadioGroup
    │       ├── DropdownMenu.RadioItem
    │       └── DropdownMenu.RadioItem
    └── DropdownMenu.Sub
        ├── DropdownMenu.SubTrigger
        └── DropdownMenu.SubContent
            └── DropdownMenu.Group
                ├── DropdownMenu.Label
                ├── DropdownMenu.Item
                └── DropdownMenu.Item

Examples

Basic

A basic dropdown menu with labels and separators.

Use DropdownMenu.Sub to nest secondary actions.

Shortcuts

Add DropdownMenu.Shortcut to show keyboard hints.

Icons

Combine icons with labels for quick scanning.

Checkboxes

Use DropdownMenu.CheckboxItem for toggles.

Checkboxes Icons

Add icons to checkbox items.

Radio Group

Use DropdownMenu.RadioGroup for exclusive choices.

Radio Icons

Show radio options with icons.

Destructive

Use variant="destructive" for irreversible actions.

Avatar

An account switcher dropdown triggered by an avatar.

Complex

A richer example combining groups, icons, and submenus.

API Reference

See the Radix UI documentation for the full API reference.