Dropdown Menu

Displays a menu to the user — such as a set of actions or functions — triggered by a button.

Examples

Basic

A basic dropdown menu with labels and separators.

Open
My Account
View Code 
<c-dropdown-menu>
  <c-button slot="trigger" variant="outline">Open</c-button>
  <div slot="content">
    <c-dropdown-menu-group>
      <c-dropdown-menu-label>My Account</c-dropdown-menu-label>
      <c-dropdown-menu-item label="Profile"></c-dropdown-menu-item>
      <c-dropdown-menu-item label="Billing"></c-dropdown-menu-item>
      <c-dropdown-menu-item label="Settings"></c-dropdown-menu-item>
    </c-dropdown-menu-group>
    <c-dropdown-menu-separator></c-dropdown-menu-separator>
    <c-dropdown-menu-item label="GitHub"></c-dropdown-menu-item>
    <c-dropdown-menu-item label="Support"></c-dropdown-menu-item>
    <c-dropdown-menu-item label="API" disabled></c-dropdown-menu-item>
  </div>
</c-dropdown-menu>

Shortcuts

Add c-dropdown-menu-shortcut to show keyboard hints.

Open
My Account ⇧⌘P ⌘B ⌘S ⇧⌘Q
View Code 
<c-dropdown-menu>
  <c-button slot="trigger" variant="outline">Open</c-button>
  <div slot="content">
    <c-dropdown-menu-group>
      <c-dropdown-menu-label>My Account</c-dropdown-menu-label>
      <c-dropdown-menu-item label="Profile">
        <c-dropdown-menu-shortcut>⇧⌘P</c-dropdown-menu-shortcut>
      </c-dropdown-menu-item>
      <c-dropdown-menu-item label="Billing">
        <c-dropdown-menu-shortcut>⌘B</c-dropdown-menu-shortcut>
      </c-dropdown-menu-item>
      <c-dropdown-menu-item label="Settings">
        <c-dropdown-menu-shortcut>⌘S</c-dropdown-menu-shortcut>
      </c-dropdown-menu-item>
    </c-dropdown-menu-group>
    <c-dropdown-menu-separator></c-dropdown-menu-separator>
    <c-dropdown-menu-item label="Log out">
      <c-dropdown-menu-shortcut>⇧⌘Q</c-dropdown-menu-shortcut>
    </c-dropdown-menu-item>
  </div>
</c-dropdown-menu>

Icons

Combine icons with labels for quick scanning.

Open
Profile Billing Settings Log out
View Code 
<c-dropdown-menu>
  <c-button slot="trigger" variant="outline">Open</c-button>
  <div slot="content">
    <c-dropdown-menu-item>
      <docs-lucide-icon icon="user" size="16"></docs-lucide-icon>
      Profile
    </c-dropdown-menu-item>
    <c-dropdown-menu-item>
      <docs-lucide-icon icon="credit-card" size="16"></docs-lucide-icon>
      Billing
    </c-dropdown-menu-item>
    <c-dropdown-menu-item>
      <docs-lucide-icon icon="settings" size="16"></docs-lucide-icon>
      Settings
    </c-dropdown-menu-item>
    <c-dropdown-menu-separator></c-dropdown-menu-separator>
    <c-dropdown-menu-item variant="destructive">
      <docs-lucide-icon icon="log-out" size="16"></docs-lucide-icon>
      Log out
    </c-dropdown-menu-item>
  </div>
</c-dropdown-menu>

Checkboxes

Use c-dropdown-menu-checkbox-item for toggles.

Open
Appearance
View Code 
<c-dropdown-menu>
  <c-button slot="trigger" variant="outline">Open</c-button>
  <div slot="content">
    <c-dropdown-menu-group>
      <c-dropdown-menu-label>Appearance</c-dropdown-menu-label>
      <c-dropdown-menu-checkbox-item
        label="Status Bar"
        checked
      ></c-dropdown-menu-checkbox-item>
      <c-dropdown-menu-checkbox-item
        label="Activity Bar"
        disabled
      ></c-dropdown-menu-checkbox-item>
      <c-dropdown-menu-checkbox-item
        label="Panel"
      ></c-dropdown-menu-checkbox-item>
    </c-dropdown-menu-group>
  </div>
</c-dropdown-menu>

Checkboxes Icons

Add icons to checkbox items.

Notifications
Notification Preferences Email notifications SMS notifications Push notifications
View Code 
<c-dropdown-menu>
  <c-button slot="trigger" variant="outline">Notifications</c-button>
  <div slot="content">
    <c-dropdown-menu-group>
      <c-dropdown-menu-label>Notification Preferences</c-dropdown-menu-label>
      <c-dropdown-menu-checkbox-item checked>
        <docs-lucide-icon icon="mail" size="16"></docs-lucide-icon>
        Email notifications
      </c-dropdown-menu-checkbox-item>
      <c-dropdown-menu-checkbox-item>
        <docs-lucide-icon icon="message-square" size="16"></docs-lucide-icon>
        SMS notifications
      </c-dropdown-menu-checkbox-item>
      <c-dropdown-menu-checkbox-item checked>
        <docs-lucide-icon icon="bell" size="16"></docs-lucide-icon>
        Push notifications
      </c-dropdown-menu-checkbox-item>
    </c-dropdown-menu-group>
  </div>
</c-dropdown-menu>

Radio Group

Use c-dropdown-menu-radio-group for exclusive choices.

Open
Panel Position
View Code 
<c-dropdown-menu>
  <c-button slot="trigger" variant="outline">Open</c-button>
  <div slot="content">
    <c-dropdown-menu-group>
      <c-dropdown-menu-label>Panel Position</c-dropdown-menu-label>
      <c-dropdown-menu-radio-group value="bottom">
        <c-dropdown-menu-radio-item
          value="top"
          label="Top"
        ></c-dropdown-menu-radio-item>
        <c-dropdown-menu-radio-item
          value="bottom"
          label="Bottom"
        ></c-dropdown-menu-radio-item>
        <c-dropdown-menu-radio-item
          value="right"
          label="Right"
        ></c-dropdown-menu-radio-item>
      </c-dropdown-menu-radio-group>
    </c-dropdown-menu-group>
  </div>
</c-dropdown-menu>

Radio Icons

Show radio options with icons.

Payment Method
Select Payment Method Credit Card PayPal Bank Transfer
View Code 
<c-dropdown-menu>
  <c-button slot="trigger" variant="outline">Payment Method</c-button>
  <div slot="content">
    <c-dropdown-menu-group>
      <c-dropdown-menu-label>Select Payment Method</c-dropdown-menu-label>
      <c-dropdown-menu-radio-group value="card">
        <c-dropdown-menu-radio-item value="card">
          <docs-lucide-icon icon="credit-card" size="16"></docs-lucide-icon>
          Credit Card
        </c-dropdown-menu-radio-item>
        <c-dropdown-menu-radio-item value="paypal">
          <docs-lucide-icon icon="wallet" size="16"></docs-lucide-icon>
          PayPal
        </c-dropdown-menu-radio-item>
        <c-dropdown-menu-radio-item value="bank">
          <docs-lucide-icon icon="building-2" size="16"></docs-lucide-icon>
          Bank Transfer
        </c-dropdown-menu-radio-item>
      </c-dropdown-menu-radio-group>
    </c-dropdown-menu-group>
  </div>
</c-dropdown-menu>

Destructive

Use variant="destructive" for irreversible actions.

Actions
Edit Share Delete
View Code 
<c-dropdown-menu>
  <c-button slot="trigger" variant="outline">Actions</c-button>
  <div slot="content">
    <c-dropdown-menu-group>
      <c-dropdown-menu-item>
        <docs-lucide-icon icon="pencil" size="16"></docs-lucide-icon>
        Edit
      </c-dropdown-menu-item>
      <c-dropdown-menu-item>
        <docs-lucide-icon icon="share" size="16"></docs-lucide-icon>
        Share
      </c-dropdown-menu-item>
    </c-dropdown-menu-group>
    <c-dropdown-menu-separator></c-dropdown-menu-separator>
    <c-dropdown-menu-group>
      <c-dropdown-menu-item variant="destructive">
        <docs-lucide-icon icon="trash" size="16"></docs-lucide-icon>
        Delete
      </c-dropdown-menu-item>
    </c-dropdown-menu-group>
  </div>
</c-dropdown-menu>

API Reference

c-dropdown-menu

The root container component that manages the dropdown state and positioning.

Prop Type Default
side 'top' | 'right' | 'bottom' | 'left' | 'auto' 'bottom'
align 'start' | 'center' | 'end' 'start'
side-offset number 4
align-offset number 0
strategy 'fixed' | 'absolute' 'fixed'
open boolean false

Events: Fires openchange event with { open: boolean } when menu state changes.

Slots: Use trigger slot for the trigger element and content slot for menu items.

c-dropdown-menu-item

A selectable menu item.

Prop Type Default
label string -
disabled boolean false
variant 'default' | 'destructive' 'default'
inset boolean false

Events: Fires select event with { label: string } when item is selected.

c-dropdown-menu-checkbox-item

A menu item with checkbox state.

Prop Type Default
label string -
checked boolean false
disabled boolean false

Events: Fires change event with { checked: boolean, label: string } when state changes.

c-dropdown-menu-radio-group

Container for radio items with single selection.

Prop Type Default
value string -

Events: Fires change event with { value: string } when selection changes.

Additional Components

c-dropdown-menu-radio-item: Radio item with value, label, and disabled props.

c-dropdown-menu-label: Non-interactive label with inset prop for alignment.

c-dropdown-menu-separator: Visual divider with no props.

c-dropdown-menu-group: Container for grouping items with no props.

c-dropdown-menu-group-heading: Group heading with inset prop.

c-dropdown-menu-shortcut: Keyboard shortcut display with content via default slot.

Keyboard Navigation

Key Action
Enter / Space Open menu (on trigger) or select item
ArrowDown Move to next item or open and focus first item
ArrowUp Move to previous item or open and focus last item
Escape Close menu
Tab Close menu and move focus