Dropdown

A toggle-triggered overlay menu. Uses the Popover API for native light-dismiss behavior. The JS module adds keyboard navigation (arrows, Home, End, typeahead). Falls back to aria-expanded toggling without the Popover API.

Basic dropdown

<div class="ln-dropdown">
  <button class="ln-dropdown__toggle" aria-expanded="false">
    Actions ▾
  </button>
  <div class="ln-dropdown__menu">
    <a class="ln-dropdown__item" href="#">Edit</a>
    <a class="ln-dropdown__item" href="#">Duplicate</a>
    <div class="ln-dropdown__divider"></div>
    <a class="ln-dropdown__item ln-dropdown__item--danger" href="#">Delete</a>
  </div>
</div>

Dropdown with headings

<div class="ln-dropdown">
  <button class="ln-dropdown__toggle" aria-expanded="false">
    More ▾
  </button>
  <div class="ln-dropdown__menu">
    <div class="ln-dropdown__heading">Navigate</div>
    <a class="ln-dropdown__item" href="#">
      <span class="ln-dropdown__label">Go to file</span>
      <span class="ln-dropdown__shortcut">⌘P</span>
    </a>
    <a class="ln-dropdown__item" href="#">
      <span class="ln-dropdown__label">Go to line</span>
      <span class="ln-dropdown__shortcut">⌘G</span>
    </a>
    <div class="ln-dropdown__divider"></div>
    <div class="ln-dropdown__heading">Actions</div>
    <a class="ln-dropdown__item" href="#">
      <span class="ln-dropdown__label">Copy link</span>
    </a>
  </div>
</div>

Reference

Class	Description	Responsive
`.ln-dropdown`	Dropdown container	No
`.ln-dropdown__toggle`	Trigger element	No
`.ln-dropdown__menu`	Popover menu panel	No
`.ln-dropdown__item`	Menu item (link or button)	No
`.ln-dropdown__icon`	Item leading icon	No
`.ln-dropdown__label`	Item text label	No
`.ln-dropdown__shortcut`	Keyboard shortcut hint	No
`.ln-dropdown__heading`	Section heading inside menu	No
`.ln-dropdown__divider`	Separator line between groups	No
`.ln-dropdown--end`	Right-align menu	No
`.ln-dropdown--up`	Open menu above trigger	No
`.ln-dropdown--start`	Left-align menu	No
`.ln-dropdown--wide`	Match menu width to trigger	No
`.ln-dropdown--{role}`	Role modifier (primary, secondary, success, warning, danger, info)	No