Components
Glass Dropdown Menu
A frosted glass dropdown menu — portaled so it never clips, with keyboard navigation, labels, and separators.
Playground
Edit the props live and copy the config.
Align
Tint
0.55
<GlassDropdownMenu>
<GlassDropdownTrigger>Open menu</GlassDropdownTrigger>
<GlassDropdownContent align="start" tint={0.55}>
<GlassDropdownLabel>Account</GlassDropdownLabel>
<GlassDropdownItem>Profile</GlassDropdownItem>
<GlassDropdownItem>Billing</GlassDropdownItem>
<GlassDropdownSeparator />
<GlassDropdownItem>Sign out</GlassDropdownItem>
</GlassDropdownContent>
</GlassDropdownMenu>Install
npx shadcn@latest add https://websiteglass.com/r/glass-dropdown-menu.jsonUsage
import {
GlassDropdownMenu,
GlassDropdownTrigger,
GlassDropdownContent,
GlassDropdownItem,
GlassDropdownLabel,
GlassDropdownSeparator,
} from '@/components/ui/glass-dropdown-menu';
<GlassDropdownMenu>
<GlassDropdownTrigger>Options</GlassDropdownTrigger>
<GlassDropdownContent>
<GlassDropdownLabel>Actions</GlassDropdownLabel>
<GlassDropdownItem onClick={onEdit}>Edit</GlassDropdownItem>
<GlassDropdownSeparator />
<GlassDropdownItem>Delete</GlassDropdownItem>
</GlassDropdownContent>
</GlassDropdownMenu>Notes
Content is portaled to document.body and positioned from the trigger rect, so
an ancestor overflow:hidden never clips it. Arrow keys move between items,
Enter activates, Escape and outside-click dismiss. GlassDropdownContent
takes tint, align ("start" | "end"), and sideOffset.