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

Checkboxes

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

Open
Appearance 
<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 
<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>
        <c-lucide-icon icon="mail" size="16"></c-lucide-icon>
        Email notifications
      </c-dropdown-menu-checkbox-item>
      <c-dropdown-menu-checkbox-item>
        <c-lucide-icon icon="message-square" size="16"></c-lucide-icon>
        SMS notifications
      </c-dropdown-menu-checkbox-item>
      <c-dropdown-menu-checkbox-item checked>
        <c-lucide-icon icon="bell" size="16"></c-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 
<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 
<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">
          <c-lucide-icon icon="credit-card" size="16"></c-lucide-icon>
          Credit Card
        </c-dropdown-menu-radio-item>
        <c-dropdown-menu-radio-item value="paypal">
          <c-lucide-icon icon="wallet" size="16"></c-lucide-icon>
          PayPal
        </c-dropdown-menu-radio-item>
        <c-dropdown-menu-radio-item value="bank">
          <c-lucide-icon icon="building-2" size="16"></c-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 
<c-dropdown-menu>
  <c-button slot="trigger" variant="outline">Actions</c-button>
  <div slot="content">
    <c-dropdown-menu-group>
      <c-dropdown-menu-item>
        <c-lucide-icon icon="pencil" size="16"></c-lucide-icon>
        Edit
      </c-dropdown-menu-item>
      <c-dropdown-menu-item>
        <c-lucide-icon icon="share" size="16"></c-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">
        <c-lucide-icon icon="trash" size="16"></c-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 Description
side 'top' | 'right' | 'bottom' | 'left' | 'auto' 'bottom' The preferred side to render the content
align 'start' | 'center' | 'end' 'start' The preferred alignment
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 Description
label string - -
disabled boolean false Whether the component is disabled
variant 'default' | 'destructive' 'default' Visual style variant
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 Description
label string - -
checked boolean false Whether the component is checked
disabled boolean false Whether the component is disabled

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 Description
value string - Value of the component

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 Description
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 -