Dropdown Menu
A menu of actions or options triggered by a button.
<script lang="ts">
import {
DropdownMenu,
DropdownMenuTrigger,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuSeparator,
DropdownMenuLabel
} from "$lib/components/ui/dropdown-menu";
import { Button } from "$lib/components/ui/button";
</script>
<DropdownMenu>
<DropdownMenuTrigger>
{#snippet child({ props })}
<Button variant="ghost" {...props}>Open menu</Button>
{/snippet}
</DropdownMenuTrigger>
<DropdownMenuContent>
<DropdownMenuLabel>My Account</DropdownMenuLabel>
<DropdownMenuItem>Profile</DropdownMenuItem>
<DropdownMenuItem>Settings</DropdownMenuItem>
<DropdownMenuItem>Billing</DropdownMenuItem>
<DropdownMenuSeparator />
<DropdownMenuItem variant="destructive">Log out</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>Installation
Install the lily base and `utils` (run once per project).
npx lily-svelte@latest initCopy the dropdown-menu source from the registry into $lib/components/ui/dropdown-menu.
Usage
<script lang="ts">
import {
DropdownMenu,
DropdownMenuTrigger,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuSeparator,
DropdownMenuLabel
} from '$lib/components/ui/dropdown-menu';
import { Button } from '$lib/components/ui/button';
</script>
<DropdownMenu>
<DropdownMenuTrigger>
{#snippet child({ props })}
<Button variant="ghost" {...props}>Open</Button>
{/snippet}
</DropdownMenuTrigger>
<DropdownMenuContent>
<DropdownMenuLabel>My Account</DropdownMenuLabel>
<DropdownMenuItem>Profile</DropdownMenuItem>
<DropdownMenuSeparator />
<DropdownMenuItem variant="destructive">Log out</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>