Dropdown Menu

A highly modular dropdown popover designed to arrange nested navigation hooks, shortcuts, binary toggles, radio selectors, and deep dropdown branches under a beautiful glass backdrop.

Preview

Active State bindings

Sidebar toggle state: Shown

Status Bar toggle state: Hidden

Theme radio selection: dark

Installation

npx shadcn-svelte@latest add https://ui.grgurevic.click/r/dropdown-menu.json

Svelte Composition Code

<script lang="ts">
	import * as DropdownMenu from "$lib/components/ui/dropdown-menu";
	import { Button } from "$lib/components/ui/button";
	import { User, Settings, LogOut } from "lucide-svelte";
</script>

<DropdownMenu.Root>
	<DropdownMenu.Trigger>
		<Button>Open Options</Button>
	</DropdownMenu.Trigger>
	<DropdownMenu.Content class="w-56" align="end">
		<DropdownMenu.Label>My Account</DropdownMenu.Label>
		<DropdownMenu.Separator />
		<DropdownMenu.Group>
			<DropdownMenu.Item>
				<User class="mr-2 size-4" />
				<span>Profile</span>
				<DropdownMenu.Shortcut>⇧⌘P</DropdownMenu.Shortcut>
			</DropdownMenu.Item>
			<DropdownMenu.Item>
				<Settings class="mr-2 size-4" />
				<span>Settings</span>
			</DropdownMenu.Item>
		</DropdownMenu.Group>
		<DropdownMenu.Separator />
		<DropdownMenu.Item variant="destructive">
			<LogOut class="mr-2 size-4" />
			<span>Log out</span>
		</DropdownMenu.Item>
	</DropdownMenu.Content>
</DropdownMenu.Root>

API & Props Reference

Component	Role & Props
DropdownMenu.Root	The master toggle coordinator. Mounts and coordinates popup anchor positions.
DropdownMenu.Trigger	The active click element triggering viewport openings.
DropdownMenu.Content	The popup container card. Takes `align="start" \| "center" \| "end"` to set orientation offsets.
DropdownMenu.Item	Standard menu list item. Takes `variant="default" \| "destructive"` and `disabled` boolean.
DropdownMenu.CheckboxItem	Toggle item. Takes `bind:checked` to link active boolean states.
DropdownMenu.RadioGroup	Radio capsule grouping exclusive selector parameters. Takes `bind:value`.
DropdownMenu.RadioItem	Mutually exclusive item option. Takes `value` string.
DropdownMenu.Sub	Deep dropdown folder trigger to anchor nested sub-dropdown trees.