Foundations

Components

A highly modular dropdown popover designed to arrange nested navigation hooks, shortcuts, and custom toggles under a beautiful glass backdrop.

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

A dropdown displaying user options and actions.

Background

Checkbox items and radio groups for configuring settings.

Sidebar toggle: Shown

Status Bar toggle: Hidden

Theme mode selection: dark

Background

The best practices when using dropdown menus.

Use separators to logically group related actions and reduce cognitive load.
Add keyboard shortcuts to standard menu items to assist power users.
Always display destructive actions, such as log out or delete, at the bottom of the list in red. Pair them with a confirmation Dialog to prevent accidental data loss.
Limit sub-menu depth to a single level to prevent nested popovers from going out of screen bounds.

Dropdown sub-components and customization parameters.

Component / Prop	Type / Role	Default	Description
DropdownMenu.Root	Toggle coordinator	-	Coordinates dialog modal visibility, focus, and open state.
DropdownMenu.Trigger	Trigger element	-	Clickable button or anchor opening the dropdown content popover.
DropdownMenu.Content	Popover container	-	The floating glass container. Accepts alignment parameters like "center", "start", or "end".
DropdownMenu.Item	Standard item	-	Menu action option. Accepts "default" or "destructive" variant overrides.
liquidGlass	boolean	false	Enables physical liquid glass refraction distortion (Chromium only).
refractiveIndex	number	1.5	Index of refraction (IOR) for the glass surface curvature. Range 1.0 (air) to 2.4.
bezelWidth	number	30	Depth of the glass bezel refraction boundary zone (px).
displacementScale	number	30	Strength of the physical refraction displacement offset.
surfaceProfile	"circle" \| "squircle" \| "concave" \| "lip"	"squircle"	3D bezel outline profile contour style.

Give feedback