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={<DotsThreeOutline className={iconClass} weight="fill" />}
					aria-label="Row actions"
				/>
			</DropdownMenuTrigger>
			<DropdownMenuContent className="w-48">
				<DropdownMenuItem>
					<PencilSimple className={iconClass} aria-hidden />
					Edit
				</DropdownMenuItem>
				<DropdownMenuItem>
					<ShareNetwork className={iconClass} aria-hidden />
					Share
				</DropdownMenuItem>
				<DropdownMenuItem>
					<DownloadSimple className={iconClass} aria-hidden />
					Download
				</DropdownMenuItem>
				<DropdownMenuSeparator />
				<DropdownMenuItem variant="destructive">
					<Trash className={iconClass} aria-hidden />
					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>
					<PencilSimple className={iconClass} aria-hidden />
					Edit
				</DropdownMenuItem>
				<DropdownMenuItem>
					<Copy className={iconClass} aria-hidden />
					Duplicate
				</DropdownMenuItem>
				<DropdownMenuSeparator />
				<DropdownMenuSub>
					<DropdownMenuSubTrigger>
						<ShareNetwork className={iconClass} aria-hidden />
						Share
					</DropdownMenuSubTrigger>
					<DropdownMenuSubContent>
						<DropdownMenuItem>Email</DropdownMenuItem>
						<DropdownMenuItem>Slack</DropdownMenuItem>
						<DropdownMenuItem>Copy Link</DropdownMenuItem>
					</DropdownMenuSubContent>
				</DropdownMenuSub>
				<DropdownMenuSub>
					<DropdownMenuSubTrigger>
						<Archive className={iconClass} aria-hidden />
						Move to
					</DropdownMenuSubTrigger>
					<DropdownMenuSubContent>
						<DropdownMenuItem>Archive</DropdownMenuItem>
						<DropdownMenuItem>Drafts</DropdownMenuItem>
						<DropdownMenuItem>Trash</DropdownMenuItem>
					</DropdownMenuSubContent>
				</DropdownMenuSub>
				<DropdownMenuSeparator />
				<DropdownMenuItem variant="destructive">
					<Trash className={iconClass} aria-hidden />
					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={<DotsThreeOutline className={iconClass} weight="fill" />}
					aria-label="Row actions"
				/>
			</DropdownMenuTrigger>
			<DropdownMenuContent align="end" className="w-48">
				<DropdownMenuItem onSelect={() => {}}>
					<ArrowSquareOut className={iconClass} aria-hidden />
					View Details
				</DropdownMenuItem>
				<DropdownMenuItem onSelect={() => {}}>
					<PencilSimple className={iconClass} aria-hidden />
					Edit
				</DropdownMenuItem>
				<DropdownMenuItem onSelect={() => {}}>
					<Copy className={iconClass} aria-hidden />
					Duplicate
				</DropdownMenuItem>
				<DropdownMenuSeparator />
				<DropdownMenuItem variant="destructive" onSelect={() => {}}>
					<Trash className={iconClass} aria-hidden />
					Delete
				</DropdownMenuItem>
			</DropdownMenuContent>
		</DropdownMenu>

Profile dropdown menu

User profile menu with integration status, account links, and log out

<DropdownMenu>
			<DropdownMenuTrigger asChild>
				<Button variant="secondary" className={className}>
					<Avatar size="sm" className="mr-2">
						<AvatarFallback variant="blue">VF</AvatarFallback>
					</Avatar>
					Viktor Frankl
					<CaretRight className="ml-1 size-4 rotate-90" aria-hidden />
				</Button>
			</DropdownMenuTrigger>
			<DropdownMenuContent align="start" className="w-[329px]">
				<ProfileDropdownMenuPanel embedded />
			</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

Dropdown Menu

Dropdown Menu

Overview

Basic Usage

Simple Dropdown

With Icons

Icon Menu Items

With Labels

Labeled Sections

Keyboard Shortcuts

Shortcut Hints

Checkbox Items

Multi-Select Options

Radio Group

Single Select Options

Sub Menus

Nested Menus

Disabled Items

Disabled Menu Items

Table Row Actions

Row Action Menu

Profile Menu

Profile dropdown menu

Best Practices

Group related items

Use clear labels

Place destructive actions last

Don't overload menus

Don't use for navigation

Don't hide critical actions

Props

DropdownMenuItem

DropdownMenuCheckboxItem

DropdownMenuRadioGroup

DropdownMenuContent

Accessibility