Primitive / Moleculestable
Dropdown Menu
Action menu anchored to a trigger with keyboard navigation.
@glinui/uiComponent: dropdown-menu
Installation
Install from the package for shared ownership or from the registry for copy-paste control.
Package Manager
pnpm add @glinui/ui @glinui/tokensRegistry
pnpm dlx @glinui/cli@latest add dropdown-menuUsage
Basic
TSX
1import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuItem } from "@glinui/ui"23export function Demo() {4 return (5 <DropdownMenu>6 <DropdownMenuTrigger>Open menu</DropdownMenuTrigger>7 <DropdownMenuContent>8 <DropdownMenuLabel>My Account</DropdownMenuLabel>9 <DropdownMenuSeparator />10 <DropdownMenuItem>Profile</DropdownMenuItem>11 <DropdownMenuItem>Settings</DropdownMenuItem>12 <DropdownMenuItem>Logout</DropdownMenuItem>13 </DropdownMenuContent>14 </DropdownMenu>15 )16}
Glass Variant
TSX
1import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem } from "@glinui/ui"23export function Demo() {4 return (5 <DropdownMenu>6 <DropdownMenuTrigger variant="glass">Glass menu</DropdownMenuTrigger>7 <DropdownMenuContent variant="glass">8 <DropdownMenuItem variant="glass">Profile</DropdownMenuItem>9 <DropdownMenuItem variant="glass">Billing</DropdownMenuItem>10 </DropdownMenuContent>11 </DropdownMenu>12 )13}
Accessibility
- Built on Radix DropdownMenu with full WAI-ARIA.
- Focus is trapped within the menu when open.
Keyboard Interactions
| Key | Action |
|---|---|
| Enter / Space | Open the menu or select an item. |
| Arrow Up / Down | Navigate between menu items. |
| Arrow Right | Open a submenu. |
| Arrow Left | Close a submenu. |
| Escape | Close the menu. |
ARIA Attributes
- `role="menu"`
- `role="menuitem"`
- `aria-expanded`
- `aria-haspopup`
Reduced Motion
Open/close transitions respect `prefers-reduced-motion`.
Affected properties
opacitytransformAPI Reference
DropdownMenu
| Prop | Type | Required | Default | Description |
|---|---|---|---|---|
open | boolean | - | - | Controlled open state. |
defaultOpen | boolean | - | - | Initial open state. |
onOpenChange | (open: boolean) => void | - | - | Open state change handler. |
modal | boolean | - | true | Trap focus within the menu. |
size | "sm" | "md" | "lg" | No | "md" | Variant option from dropdownMenuItemVariants. |
variant | "default" | "glass" | "frosted" | "outline" | "ghost" | No | "default" | Variant option from dropdownMenuItemVariants. |
DropdownMenuTrigger
| Prop | Type | Required | Default | Description |
|---|---|---|---|---|
variant | "default" | "glass" | "frosted" | "outline" | "ghost" | No | default | Visual treatment. |
size | "sm" | "md" | "lg" | No | md | Density scale. |
asChild | boolean | - | false | Render as child element. |
DropdownMenuContent
| Prop | Type | Required | Default | Description |
|---|---|---|---|---|
variant | "default" | "glass" | "frosted" | "outline" | "ghost" | No | default | Visual treatment. |
size | "sm" | "md" | "lg" | No | md | Density scale. |
sideOffset | number | - | 4 | Distance from trigger in pixels. |
align | "start" | "center" | "end" | - | center | Alignment relative to trigger. |
DropdownMenuItem
| Prop | Type | Required | Default | Description |
|---|---|---|---|---|
variant | "default" | "glass" | "frosted" | "outline" | "ghost" | No | default | Visual treatment. |
inset | boolean | - | false | Adds left padding for icon alignment. |
disabled | boolean | - | false | Prevents interaction. |
size | "sm" | "md" | "lg" | No | "md" | Variant option from dropdownMenuItemVariants. |
DropdownMenuLabel
| Prop | Type | Required | Default | Description |
|---|---|---|---|---|
inset | boolean | - | false | Adds left padding for icon alignment. |
size | "sm" | "md" | "lg" | No | "md" | Variant option from dropdownMenuItemVariants. |
variant | "default" | "glass" | "frosted" | "outline" | "ghost" | No | "default" | Variant option from dropdownMenuItemVariants. |
Source
Import directly from the package or browse the source on GitHub. Click any file to view it.
Import
import { DropdownMenu } from "@glinui/ui"Source Files
Dependencies
@glinui/uiGenerated API Snapshot
Beta
Generated API Snapshot
BetaAuto-extracted from TypeScript source in packages/ui/src/components/dropdown-menu.tsx. This section is in beta and may lag behind hand-curated docs. Regenerate with pnpm --filter @glinui/docs api:generate.
Generated: 2026-02-19T17:59:28.468Z · Full index: /docs/api-metadata
Primary Props Type
DropdownMenuProps
DropdownMenuCheckboxItemProps
| Prop | Type | Required | Default | Description |
|---|---|---|---|---|
size | "sm" | "md" | "lg" | No | "md" | Variant option from dropdownMenuItemVariants. |
variant | "default" | "glass" | "frosted" | "outline" | "ghost" | No | "default" | Variant option from dropdownMenuItemVariants. |
DropdownMenuContentProps
| Prop | Type | Required | Default | Description |
|---|---|---|---|---|
size | "sm" | "md" | "lg" | No | "md" | Variant option from dropdownMenuContentVariants. |
variant | "default" | "glass" | "frosted" | "outline" | "ghost" | No | "default" | Variant option from dropdownMenuContentVariants. |
DropdownMenuItemProps
| Prop | Type | Required | Default | Description |
|---|---|---|---|---|
inset | boolean | No | - | - |
size | "sm" | "md" | "lg" | No | "md" | Variant option from dropdownMenuItemVariants. |
variant | "default" | "glass" | "frosted" | "outline" | "ghost" | No | "default" | Variant option from dropdownMenuItemVariants. |
DropdownMenuLabelProps
| Prop | Type | Required | Default | Description |
|---|---|---|---|---|
inset | boolean | No | - | - |
DropdownMenuProps
No explicit fields extracted for this props type.
DropdownMenuRadioItemProps
| Prop | Type | Required | Default | Description |
|---|---|---|---|---|
size | "sm" | "md" | "lg" | No | "md" | Variant option from dropdownMenuItemVariants. |
variant | "default" | "glass" | "frosted" | "outline" | "ghost" | No | "default" | Variant option from dropdownMenuItemVariants. |
DropdownMenuSeparatorProps
No explicit fields extracted for this props type.
DropdownMenuShortcutProps
No explicit fields extracted for this props type.
DropdownMenuSubContentProps
| Prop | Type | Required | Default | Description |
|---|---|---|---|---|
size | "sm" | "md" | "lg" | No | "md" | Variant option from dropdownMenuContentVariants. |
variant | "default" | "glass" | "frosted" | "outline" | "ghost" | No | "default" | Variant option from dropdownMenuContentVariants. |
DropdownMenuSubTriggerProps
| Prop | Type | Required | Default | Description |
|---|---|---|---|---|
inset | boolean | No | - | - |
size | "sm" | "md" | "lg" | No | "md" | Variant option from dropdownMenuItemVariants. |
variant | "default" | "glass" | "frosted" | "outline" | "ghost" | No | "default" | Variant option from dropdownMenuItemVariants. |
DropdownMenuTriggerProps
| Prop | Type | Required | Default | Description |
|---|---|---|---|---|
size | "sm" | "md" | "lg" | No | "md" | Variant option from dropdownMenuTriggerVariants. |
variant | "default" | "glass" | "frosted" | "outline" | "ghost" | No | "default" | Variant option from dropdownMenuTriggerVariants. |