Use dropdown menu for actions triggered by a button. Compose with item, checkbox item, radio groups, and nested submenus.

1<script lang="ts">
2	import * as DropdownMenu from '~/components/dropdown-menu';
3	import { Button } from '~/components/button';
4</script>
5
6<DropdownMenu.Root>
7	<DropdownMenu.Trigger>
8		{#snippet child({ props })}
9			<Button {...props} variant="outline">Open</Button>
10		{/snippet}
11	</DropdownMenu.Trigger>
12	<DropdownMenu.Content class="w-56">
13		<DropdownMenu.Label>My Account</DropdownMenu.Label>
14		<DropdownMenu.Separator />
15		<DropdownMenu.Group>
16			<DropdownMenu.Item>
17				Profile
18				<DropdownMenu.Shortcut>⇧⌘P</DropdownMenu.Shortcut>
19			</DropdownMenu.Item>
20			<DropdownMenu.Item>
21				Billing
22				<DropdownMenu.Shortcut>⌘B</DropdownMenu.Shortcut>
23			</DropdownMenu.Item>
24		</DropdownMenu.Group>
25		<DropdownMenu.Separator />
26		<DropdownMenu.Item>Log out</DropdownMenu.Item>
27	</DropdownMenu.Content>
28</DropdownMenu.Root>

Dropdown Menu

Installation

Usage