7onicDESIGN SYSTEM

Dropdown

Dropdown is a floating menu that appears when a trigger element is clicked. It supports action lists, checkboxes, radio selection, and submenus.

5
Item Types
3
Sizes
Sub
Nested
Radix
Base

Playground

Preview
bottom
Button
Size
Icon
Radius
Press Effect
Items
Radius
Flush
Items
Side
Align
<DropdownMenu>
  <DropdownMenu.Trigger asChild>
    <Button variant="outline"
  rightIcon={<ChevronDown />}>Menu</Button>
  </DropdownMenu.Trigger>
  <DropdownMenu.Content>
    <DropdownMenu.Item>Profile</DropdownMenu.Item>
    <DropdownMenu.Item>Settings</DropdownMenu.Item>
    <DropdownMenu.Separator />
    <DropdownMenu.Item>Log out</DropdownMenu.Item>
  </DropdownMenu.Content>
</DropdownMenu>

Variants

Basic
The simplest menu — a flat list of actions
Context menu
Label + Group
Organize related actions with labels and groups.
Account menu
Checkbox
Toggle multiple items ON/OFF with checkboxes.
Display settings, filters
Radio
Exclusive single selection with radio.
Density, theme
Submenu
Hierarchical actions with nested submenus.
Share, export

Sizes

sm
Padding6px 8px
Item Font12px
md
Padding6px 8px
Item Font13px
lg
Padding10px 12px
Item Font14px

API

Component Structure

DropdownMenu— Radix DropdownMenu
.Trigger.ContentProps.ItemProps.CheckboxItem.RadioGroup.RadioItem.Label.Separator.Group.Sub.SubTrigger.SubContent.Shortcut

Props

DropdownMenu.Content

size"md"
"sm" | "md" | "lg"

Menu item size

radius"md"
"md" | "lg" | "xl"

Content and item border radius (Item auto-calculated)

flushfalse
boolean

Display items full-width (no inner padding)

side"bottom"
"top" | "right" | "bottom" | "left"

Menu display direction

sideOffset4
number

Distance from trigger (px)

align"center"
"start" | "center" | "end"

Alignment relative to trigger

alignOffset0
number

Alignment offset (px)

loopfalse
boolean

Keyboard navigation loop

DropdownMenu.Item

disabledundefined
boolean

Disabled state

onSelectundefined
(event: Event) => void

Callback on selection

insetundefined
boolean

Add left padding (for icon alignment)

Customization

classNameto customize the style of content and items.

Change width

<DropdownMenu.Content className="w-56">

Highlight dangerous actions

<DropdownMenu.Item className="text-text-error focus:text-text-error">

Tip: Each sub-component accepts className, allowing you to override styles with Tailwind classes.

Anatomy

1
2
Options
3
4
5
Edit
Duplicate
6
Delete
1
Root
Component root
2
Trigger
Button to open menu
3
Content
Floating panel
4
Item
Menu item
5
Icon
Optional icon
6
Separator
Divider

Best Practices

✓

Recommended

  • ✓Use when there are 3 or more actions
  • ✓Group related actions together
  • ✓Visually distinguish destructive actions
  • ✓Show shortcut keys when available
✕

Avoid

  • ✗Don't exceed 10 menu items
  • ✗Use Nav for navigation purposes
  • ✗Don't nest submenus more than 2 levels
  • ✗Avoid long menus on mobile

Accessibility

Keyboard

EnterOpen/close menu / select item
SpaceOpen/close menu / select item
↑ ↓Navigate between items
→Open submenu
←Close submenu
EscapeClose menu

ARIA Attributes

  • role="menu" Auto-applied to Content
  • role="menuitem" Auto-applied to Item
  • aria-expanded Trigger state management
  • Focus indicator

Dropdown vs Select

They look similar but serve different purposes. Choose the right component for your use case.

Purpose

Dropdown: Action execution

Select: Value selection

Form integration

Dropdown: None

Select: name / value submission

After selection

Dropdown: Menu just closes

Select: Value reflected in trigger

Item types

Dropdown: Item, Checkbox, Radio, Sub

Select: Single selection items

Use cases

Dropdown: Context menu, account actions

Select: Country, category, sort order

Selection guide: When users choose a value to submit in a form, use Select instead. Dropdown is appropriate when clicking triggers an action (edit, delete, share, etc.).