Dropdown Menu
A menu of actions or options triggered by a button.
Installation
Installs the style saved in lily.json. For a new Diamond project,
run lily-svelte init --style diamond first.
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>