Dropdown Menu
Floating menus (Level 3) with flat, low-noise menu items.
Basic Dropdown
A simple dropdown menu with various menu items and shortcuts.
Alignment
DropdownMenuContent defaults to left alignment (align="start"). Use align="end" when needed.
Shadow Offset
Two shadow offset levels. Dropdown Menu defaults to compact (3px) for dense UIs.
Compact (Default)
Small shadow offset (3px) for dense layouts and frequent interactions.
Spacious
Large shadow offset (6px) for hero moments and prominent interactions.
Width Variants
Dropdown menus with different width configurations.
Checkbox Items
Dropdown menu with checkable items for toggling options.
Device Selection
Preview responsive layouts for different devices.
Notification Actions
Common notification management actions.
API Reference
Dropdown Menu component with shadow offset variants.
DropdownMenuContent Props
PropTypeDescription
offset"compact" | "spacious"Shadow offset level (default: compact)align"start" | "center" | "end"Content alignment (default: start)Offset Levels
OffsetShadowUse Case
compact3pxDense UIs, frequent interactions (default)spacious6pxHero moments, prominent menus