Components

Dropdown Menu

A versatile dropdown menu component for displaying contextual actions and options

Components

Dropdown Menu

A versatile dropdown menu component for displaying contextual actions and options

Overview

A versatile dropdown menu component built on Radix UI. Perfect for action menus, context menus, and option selectors.

When to Use

Use dropdown menus to provide a list of actions or options in a compact space. They're ideal for row actions in tables, toolbar menus, and settings panels.

Basic Usage

Simple Dropdown

Basic dropdown with menu items

<DropdownMenu>
			<DropdownMenuTrigger asChild>
				<Button variant="secondary">Options</Button>
			</DropdownMenuTrigger>
			<DropdownMenuContent>
				<DropdownMenuItem>Profile</DropdownMenuItem>
				<DropdownMenuItem>Settings</DropdownMenuItem>
				<DropdownMenuSeparator />
				<DropdownMenuItem>Logout</DropdownMenuItem>
			</DropdownMenuContent>
		</DropdownMenu>

With Icons

Icon Menu Items

Menu items with leading icons and a destructive variant

<DropdownMenu>
			<DropdownMenuTrigger asChild>
				<IconButton variant="ghost" size="sm" icon={<MdMoreHoriz />} aria-label="Row actions" />
			</DropdownMenuTrigger>
			<DropdownMenuContent className="w-48">
				<DropdownMenuItem>
					<MdEdit />
					Edit
				</DropdownMenuItem>
				<DropdownMenuItem>
					<MdShare />
					Share
				</DropdownMenuItem>
				<DropdownMenuItem>
					<MdDownload />
					Download
				</DropdownMenuItem>
				<DropdownMenuSeparator />
				<DropdownMenuItem variant="destructive">
					<MdDelete />
					Delete
				</DropdownMenuItem>
			</DropdownMenuContent>
		</DropdownMenu>

With Labels

Labeled Sections

Group menu items with labels and separators

<DropdownMenu>
			<DropdownMenuTrigger asChild>
				<Button variant="secondary">View Options</Button>
			</DropdownMenuTrigger>
			<DropdownMenuContent className="w-48">
				<DropdownMenuLabel>Display</DropdownMenuLabel>
				<DropdownMenuItem>Grid View</DropdownMenuItem>
				<DropdownMenuItem>List View</DropdownMenuItem>
				<DropdownMenuSeparator />
				<DropdownMenuLabel>Sort By</DropdownMenuLabel>
				<DropdownMenuItem>Name</DropdownMenuItem>
				<DropdownMenuItem>Date</DropdownMenuItem>
				<DropdownMenuItem>Size</DropdownMenuItem>
			</DropdownMenuContent>
		</DropdownMenu>

Keyboard Shortcuts

Shortcut Hints

Display keyboard shortcuts alongside menu items

<DropdownMenu>
			<DropdownMenuTrigger asChild>
				<Button variant="secondary">Edit</Button>
			</DropdownMenuTrigger>
			<DropdownMenuContent className="w-48">
				<DropdownMenuItem>
					Copy
					<DropdownMenuShortcut>Cmd+C</DropdownMenuShortcut>
				</DropdownMenuItem>
				<DropdownMenuItem>
					Paste
					<DropdownMenuShortcut>Cmd+V</DropdownMenuShortcut>
				</DropdownMenuItem>
				<DropdownMenuItem>
					Cut
					<DropdownMenuShortcut>Cmd+X</DropdownMenuShortcut>
				</DropdownMenuItem>
				<DropdownMenuSeparator />
				<DropdownMenuItem>
					Select All
					<DropdownMenuShortcut>Cmd+A</DropdownMenuShortcut>
				</DropdownMenuItem>
			</DropdownMenuContent>
		</DropdownMenu>

Checkbox Items

Multi-Select Options

Checkbox items for toggling multiple options

<DropdownMenu>
			<DropdownMenuTrigger asChild>
				<Button variant="secondary">Preferences</Button>
			</DropdownMenuTrigger>
			<DropdownMenuContent className="w-48">
				<DropdownMenuLabel>Notifications</DropdownMenuLabel>
				<DropdownMenuCheckboxItem checked={notifications} onCheckedChange={setNotifications}>
					Push Notifications
				</DropdownMenuCheckboxItem>
				<DropdownMenuCheckboxItem checked={emails} onCheckedChange={setEmails}>
					Email Notifications
				</DropdownMenuCheckboxItem>
				<DropdownMenuCheckboxItem checked={updates} onCheckedChange={setUpdates}>
					Product Updates
				</DropdownMenuCheckboxItem>
			</DropdownMenuContent>
		</DropdownMenu>

Radio Group

Single Select Options

Radio items for exclusive selection

<DropdownMenu>
			<DropdownMenuTrigger asChild>
				<Button variant="secondary">Position</Button>
			</DropdownMenuTrigger>
			<DropdownMenuContent className="w-48">
				<DropdownMenuLabel>Panel Position</DropdownMenuLabel>
				<DropdownMenuRadioGroup value={position} onValueChange={setPosition}>
					<DropdownMenuRadioItem value="top">Top</DropdownMenuRadioItem>
					<DropdownMenuRadioItem value="bottom">Bottom</DropdownMenuRadioItem>
					<DropdownMenuRadioItem value="left">Left</DropdownMenuRadioItem>
					<DropdownMenuRadioItem value="right">Right</DropdownMenuRadioItem>
				</DropdownMenuRadioGroup>
			</DropdownMenuContent>
		</DropdownMenu>

Sub Menus

Nested Menus

Sub-menus for organizing related actions

<DropdownMenu>
			<DropdownMenuTrigger asChild>
				<Button variant="secondary">Actions</Button>
			</DropdownMenuTrigger>
			<DropdownMenuContent className="w-48">
				<DropdownMenuItem>
					<MdEdit />
					Edit
				</DropdownMenuItem>
				<DropdownMenuItem>
					<MdContentCopy />
					Duplicate
				</DropdownMenuItem>
				<DropdownMenuSeparator />
				<DropdownMenuSub>
					<DropdownMenuSubTrigger>
						<MdShare />
						Share
					</DropdownMenuSubTrigger>
					<DropdownMenuSubContent>
						<DropdownMenuItem>Email</DropdownMenuItem>
						<DropdownMenuItem>Slack</DropdownMenuItem>
						<DropdownMenuItem>Copy Link</DropdownMenuItem>
					</DropdownMenuSubContent>
				</DropdownMenuSub>
				<DropdownMenuSub>
					<DropdownMenuSubTrigger>
						<MdOutlineArchive />
						Move to
					</DropdownMenuSubTrigger>
					<DropdownMenuSubContent>
						<DropdownMenuItem>Archive</DropdownMenuItem>
						<DropdownMenuItem>Drafts</DropdownMenuItem>
						<DropdownMenuItem>Trash</DropdownMenuItem>
					</DropdownMenuSubContent>
				</DropdownMenuSub>
				<DropdownMenuSeparator />
				<DropdownMenuItem variant="destructive">
					<MdDelete />
					Delete
				</DropdownMenuItem>
			</DropdownMenuContent>
		</DropdownMenu>

Disabled Items

Disabled Menu Items

Disable specific menu options

<DropdownMenu>
			<DropdownMenuTrigger asChild>
				<Button variant="secondary">File</Button>
			</DropdownMenuTrigger>
			<DropdownMenuContent className="w-48">
				<DropdownMenuItem>New File</DropdownMenuItem>
				<DropdownMenuItem>Open</DropdownMenuItem>
				<DropdownMenuItem disabled>Save (No changes)</DropdownMenuItem>
				<DropdownMenuSeparator />
				<DropdownMenuItem>Export</DropdownMenuItem>
			</DropdownMenuContent>
		</DropdownMenu>

Table Row Actions

Row Action Menu

Common pattern for table row actions with icon trigger

<DropdownMenu>
			<DropdownMenuTrigger asChild>
				<IconButton variant="ghost" size="sm" icon={<MdMoreHoriz />} aria-label="Row actions" />
			</DropdownMenuTrigger>
			<DropdownMenuContent align="end" className="w-48">
				<DropdownMenuItem onSelect={() => {}}>
					<MdOpenInNew />
					View Details
				</DropdownMenuItem>
				<DropdownMenuItem onSelect={() => {}}>
					<MdEdit />
					Edit
				</DropdownMenuItem>
				<DropdownMenuItem onSelect={() => {}}>
					<MdContentCopy />
					Duplicate
				</DropdownMenuItem>
				<DropdownMenuSeparator />
				<DropdownMenuItem variant="destructive" onSelect={() => {}}>
					<MdDelete />
					Delete
				</DropdownMenuItem>
			</DropdownMenuContent>
		</DropdownMenu>

User Account Menu

Full-featured account menu with groups, sub-menus, and shortcuts

<DropdownMenu>
			<DropdownMenuTrigger asChild>
				<Button variant="secondary" leftIcon={<MdOutlinePerson />}>
					My Account
				</Button>
			</DropdownMenuTrigger>
			<DropdownMenuContent className="w-56">
				<DropdownMenuLabel>
					<div className="flex flex-col gap-0.5 px-3 py-1">
						<span className="text-sm font-medium text-ink">John Doe</span>
						<span className="text-xs text-ink-light font-normal">john@example.com</span>
					</div>
				</DropdownMenuLabel>
				<DropdownMenuSeparator />
				<DropdownMenuGroup>
					<DropdownMenuItem>
						<MdOutlinePerson />
						Profile
						<DropdownMenuShortcut>Cmd+P</DropdownMenuShortcut>
					</DropdownMenuItem>
					<DropdownMenuItem>
						<MdOutlineCreditCard />
						Billing
					</DropdownMenuItem>
					<DropdownMenuItem>
						<MdOutlineSettings />
						Settings
						<DropdownMenuShortcut>Cmd+,</DropdownMenuShortcut>
					</DropdownMenuItem>
				</DropdownMenuGroup>
				<DropdownMenuSeparator />
				<DropdownMenuItem>
					<MdOutlineGroup />
					Team
				</DropdownMenuItem>
				<DropdownMenuSub>
					<DropdownMenuSubTrigger>
						<MdOutlinePerson />
						Invite Users
					</DropdownMenuSubTrigger>
					<DropdownMenuSubContent>
						<DropdownMenuItem>Email</DropdownMenuItem>
						<DropdownMenuItem>Slack</DropdownMenuItem>
						<DropdownMenuSeparator />
						<DropdownMenuItem>Copy Invite Link</DropdownMenuItem>
					</DropdownMenuSubContent>
				</DropdownMenuSub>
				<DropdownMenuSeparator />
				<DropdownMenuItem>
					<MdOutlineLogout />
					Log out
					<DropdownMenuShortcut>Cmd+Q</DropdownMenuShortcut>
				</DropdownMenuItem>
			</DropdownMenuContent>
		</DropdownMenu>

Best Practices

✓

Group related items

Use separators to group related menu items logically. This improves scannability.

✓

Use clear labels

Menu item labels should be clear and action-oriented. Use verbs like "Edit", "Delete", "Download".

✓

Place destructive actions last

Put destructive actions (like Delete) at the bottom of the menu, separated by a divider.

✗

Don't overload menus

Keep dropdown menus to 5-8 items. For more options, consider using nested menus or a different pattern.

✗

Don't use for navigation

Dropdown menus are for actions, not primary navigation. Use proper navigation components for that.

✗

Don't hide critical actions

Primary actions should be visible as buttons. Use dropdowns for secondary or overflow actions.

Props

DropdownMenuItem

Prop	Type	Default	Description
`variant`	`'default' \| 'destructive'`	`'default'`	Visual style variant
`inset`	`boolean`	-	Add left padding to align with items that have icons
`disabled`	`boolean`	-	Disable the menu item
`onSelect`	`(event: Event) => void`	-	Called when the item is selected
`className`	`string`	-	Additional className

DropdownMenuCheckboxItem

Prop	Type	Default	Description
`checked`	`boolean`	-	Whether the checkbox is checked
`onCheckedChange`	`(checked: boolean) => void`	-	Called when checked state changes
`disabled`	`boolean`	-	Disable the checkbox item

DropdownMenuRadioGroup

Prop	Type	Default	Description
`value`	`string`	-	The currently selected value
`onValueChange`	`(value: string) => void`	-	Called when selection changes

DropdownMenuContent

Prop	Type	Default	Description
`align`	`'start' \| 'center' \| 'end'`	`'center'`	Alignment relative to trigger
`side`	`'top' \| 'bottom' \| 'left' \| 'right'`	`'bottom'`	Preferred side to render
`sideOffset`	`number`	`4`	Distance from trigger in pixels
`className`	`string`	-	Additional className

Accessibility

Keyboard Navigation

Dropdown menus support full keyboard navigation. Use Arrow keys to navigate items, Enter to select, and Escape to close.

Keyboard navigation: Arrow keys to navigate, Enter to select
Press Escape to close the menu
Focus returns to trigger element when closed
Use proper ARIA roles and attributes
Provide clear labels for icon-only triggers
Ensure sufficient color contrast for menu items
Support screen readers with proper announcements
Make disabled items clearly visually distinct

On This Page

Overview Basic Usage With Icons With Labels Keyboard Shortcuts Checkbox Items Radio Group Sub Menus Disabled Items Table Row Actions Account Menu Best Practices Props DropdownMenuItem DropdownMenuCheckboxItem DropdownMenuRadioGroup DropdownMenuContent Accessibility

Drawer Field