Dropdown Menu Component

Capsule-styled dropdown menus with orbit hover effects and smooth animations.

Basic Dropdown

A simple dropdown menu with animated arrow indicator and keyboard shortcuts.

Multi-level Submenus

Deeply nested dropdown menus for complex navigation structures.

File Actions

A comprehensive file action menu with nested options.

Settings Menu

A settings menu combining submenus, checkboxes, and radio groups.

Theme: systemView: gridSort: name

Wide Dropdown

A wider dropdown menu for more detailed items.

With Checkboxes

Dropdown with checkable items for toggle-style options.

Status Bar: OnActivity Bar: OffPanel: Off

With Radio Group

Dropdown with radio selection for single-choice options.

Selected: Bottom

Compact Icon Menu

A minimal dropdown triggered by an icon button.

Alignment Variants

Dropdowns can be aligned to the start, center, or end of the trigger.

API Reference

DropdownMenuContent

The popover content containing menu items.

PropTypeDefault
align"start" | "center" | "end""start"
sideOffsetnumber6

DropdownMenuItem

Individual menu item with optional destructive variant.

PropTypeDefault
variant"default" | "destructive""default"
insetbooleanfalse