Dropdown <l-dropdown>

Dropdowns are used to present a list of actions or options in a floating menu anchored to a trigger button. Commonly used for overflow menus, contextual actions, and navigation.

HTML tag<l-dropdown>

⏣Native HTML

⬡Progressive

◇Custom

⬢Shadow DOM

Custom Element · Shadow DOM

Options

Basic

Click the trigger to open the menu. Click outside or press Escape to close.

Edit Duplicate Archive

Code

HTML

<l-dropdown>
  <button
    slot="trigger"
    class="l-button"
  >
    Options
  </button>
  <l-dropdown-item value="edit">Edit</l-dropdown-item>
  <l-dropdown-item value="duplicate">Duplicate</l-dropdown-item>
  <l-dropdown-item value="archive">Archive</l-dropdown-item>
</l-dropdown>

Disabled items

Add disabled to individual items to prevent selection.

Edit Duplicate Archive Delete

Code

HTML

<l-dropdown>
  <button
    slot="trigger"
    class="l-button"
  >
    Actions
  </button>
  <l-dropdown-item value="edit">Edit</l-dropdown-item>
  <l-dropdown-item value="duplicate">Duplicate</l-dropdown-item>
  <l-dropdown-item disabled>Archive</l-dropdown-item>
  <l-dropdown-item value="delete">Delete</l-dropdown-item>
</l-dropdown>

Checkbox items

Set type="checkbox" for toggleable items. The dropdown stays open when checking items.

Name Email Phone Address

Code

HTML

<l-dropdown>
  <button
    slot="trigger"
    class="l-button"
  >
    View columns
  </button>
  <l-dropdown-item
    type="checkbox"
    checked
    >Name</l-dropdown-item
  >
  <l-dropdown-item
    type="checkbox"
    checked
    >Email</l-dropdown-item
  >
  <l-dropdown-item type="checkbox">Phone</l-dropdown-item>
  <l-dropdown-item type="checkbox">Address</l-dropdown-item>
</l-dropdown>

Placement

Set placement to control position. Default is bottom-start.

Option 1 Option 2 Option 3 Option 1 Option 2 Option 3 Option 1 Option 2 Option 3

Code

HTML

<div class="flex gap-4">
  <l-dropdown placement="bottom-start">
    <button
      slot="trigger"
      class="l-button"
    >
      Bottom start
    </button>
    <l-dropdown-item>Option 1</l-dropdown-item>
    <l-dropdown-item>Option 2</l-dropdown-item>
    <l-dropdown-item>Option 3</l-dropdown-item>
  </l-dropdown>

  <l-dropdown placement="bottom-end">
    <button
      slot="trigger"
      class="l-button"
    >
      Bottom end
    </button>
    <l-dropdown-item>Option 1</l-dropdown-item>
    <l-dropdown-item>Option 2</l-dropdown-item>
    <l-dropdown-item>Option 3</l-dropdown-item>
  </l-dropdown>

  <l-dropdown placement="top-start">
    <button
      slot="trigger"
      class="l-button"
    >
      Top start
    </button>
    <l-dropdown-item>Option 1</l-dropdown-item>
    <l-dropdown-item>Option 2</l-dropdown-item>
    <l-dropdown-item>Option 3</l-dropdown-item>
  </l-dropdown>
</div>

Disabled

Add disabled to prevent opening.

Edit Duplicate

Code

HTML

<l-dropdown disabled>
  <button
    slot="trigger"
    class="l-button"
    disabled
  >
    Options
  </button>
  <l-dropdown-item value="edit">Edit</l-dropdown-item>
  <l-dropdown-item value="duplicate">Duplicate</l-dropdown-item>
</l-dropdown>

Examples

Account menu

Use the header slot for a profile row, the prefix slot on each <l-dropdown-item> for a leading icon, and <l-divider> between groups for section breaks — <l-dropdown> tightens slotted <l-divider> spacing automatically.

jane.cooper@acme.com Super admin

Manage profile Preferences Get help Sign out

v1.2.3 Documentation

Code

HTML

<l-dropdown>
  <l-avatar
    slot="trigger"
    interactive
    name="Jane Cooper"
    aria-label="Account"
    style="--appearance: circle; --color: var(--color-purple-200)"
  ></l-avatar>

  <div
    slot="header"
    class="flex items-center gap-3 px-2 py-2"
  >
    <l-avatar
      name="Jane Cooper"
      style="--appearance: circle; --color: var(--color-purple-200)"
    ></l-avatar>
    <div class="flex flex-col">
      <span class="text-sm font-medium text-primary">jane.cooper@acme.com</span>
      <span class="text-xs text-secondary">Super admin</span>
    </div>
  </div>

  <l-divider></l-divider>

  <l-dropdown-item value="profile">
    <iconify-icon
      slot="prefix"
      icon="lucide:user-round-cog"
    ></iconify-icon>
    Manage profile
  </l-dropdown-item>
  <l-dropdown-item value="preferences">
    <iconify-icon
      slot="prefix"
      icon="lucide:settings"
    ></iconify-icon>
    Preferences
  </l-dropdown-item>
  <l-dropdown-item value="help">
    <iconify-icon
      slot="prefix"
      icon="lucide:life-buoy"
    ></iconify-icon>
    Get help
  </l-dropdown-item>

  <l-divider></l-divider>

  <l-dropdown-item value="signout">
    <iconify-icon
      slot="prefix"
      icon="lucide:log-out"
    ></iconify-icon>
    Sign out
  </l-dropdown-item>

  <l-divider></l-divider>

  <div
    slot="footer"
    class="flex items-center justify-between gap-2 px-2 py-1.5 text-xs text-secondary"
  >
    <span>v1.2.3</span>
    <a
      class="hover:underline"
      href="#"
      >Documentation</a
    >
  </div>
</l-dropdown>

Accessibility

Criteria

Role

Panel has role="menu", items have role="menuitem" or role="menuitemcheckbox"

WCAG4.1.2

RGAA7.1

Expanded state

Trigger receives aria-expanded reflecting open state

WCAG4.1.2

Checked state

Checkbox items use aria-checked to communicate toggle state

WCAG4.1.2

Disabled state

Disabled items use aria-disabled, remaining in the DOM for discoverability

WCAG4.1.2

Focus management

Focus moves into menu on open and returns to trigger on close

WCAG2.4.3

RGAA10.7

Motion

Respects prefers-reduced-motion

WCAG2.3.3

Keyboard interactions

Enter

Opens menu and focuses first item; or selects the focused item

Space

Opens menu and focuses first item; or selects the focused item

ArrowDown

Opens menu and focuses first item; or moves focus to the next item (wraps)

ArrowUp

Opens menu and focuses last item; or moves focus to the previous item (wraps)

Home

Moves focus to the first item

End

Moves focus to the last item

Escape

Closes menu and returns focus to the trigger

Tab

Closes menu and moves focus to the next focusable element

API reference

Importing

JS

import 'luxen-ui/dropdown';
import 'luxen-ui/dropdown-item';

Attributes & Properties

openAttribute

Whether the dropdown is visible. Reflects to attribute

placementAttribute

Preferred placement: bottom-start (default), bottom, bottom-end, top-start, top, top-end, right-start, right, right-end, left-start, left, left-end

distanceAttribute

Offset from trigger in px. Default 4

disabledAttribute

Prevents the dropdown from opening

Methods

show()Method

Opens the dropdown

hide()Method

Closes the dropdown

toggle()Method

Toggles the dropdown

Events

showEvent

Fired before the dropdown opens. Cancelable

after-showEvent

Fired after the open animation completes

hideEvent

Fired before the dropdown closes. Cancelable

after-hideEvent

Fired after the close animation completes

selectEvent

Fired when an item is selected. Detail: { item }

Slots

triggerSlot

The element that opens the dropdown

headerSlot

Optional content rendered above the menu items (e.g. a user profile row)

(default)Slot

l-dropdown-item elements. Add <l-divider> (or <hr>) between items to render a section separator

footerSlot

Optional content rendered below the menu items (e.g. a version label or shortcut row)

CSS custom properties

--backgroundName

Panel background color. Default: Canvas

--border-radiusName

Panel border radius. Default 8px

--paddingName

Panel inner padding. Default 0.25rem. Slotted <l-divider> elements bleed by this amount to span panel edges

--shadowName

Panel box shadow

--show-durationName

Show animation duration in ms. Default 150

--hide-durationName

Hide animation duration in ms. Default 150

dropdown-item Attributes & Properties

valueAttribute

The value associated with this item

disabledAttribute

Disables the item

typeAttribute

Item type: normal (default) or checkbox

checkedAttribute

Whether a checkbox item is checked

dropdown-item Slots

(default)Slot

Item label text

prefixSlot

Leading content (e.g. icon)

suffixSlot

Trailing content