Dropdown

Dropdowns are CSS-only menus built on the native <details> element.

Usage

Wrap a <details> element with .Dropdown. Use .Dropdown-Trigger on the <summary> and .Dropdown-Menu on the menu container.

<details class="Dropdown">
  <summary class="Dropdown-Trigger">
    Options
    <span class="Dropdown-Caret" aria-hidden="true"></span>
  </summary>
  <ul class="Dropdown-Menu">
    <li><a class="Dropdown-Item" href="#">Edit</a></li>
    <li><a class="Dropdown-Item" href="#">Duplicate</a></li>
    <li class="Dropdown-Divider"></li>
    <li><a class="Dropdown-Item danger" href="#">Delete</a></li>
  </ul>
</details>

Variants

• .right: Aligns the menu to the right edge of the trigger.
• .up: Opens the menu upward instead of downward.

<details class="Dropdown right">…</details>
<details class="Dropdown up">…</details>

Item Modifier

Add .danger to a .Dropdown-Item for destructive actions.

<a class="Dropdown-Item danger" href="#">Delete</a>

Disable an item with data-disabled:

<a class="Dropdown-Item" data-disabled>Unavailable</a>

Structure

• .Dropdown-Trigger: The <summary> element that opens and closes the menu.
• .Dropdown-Caret: Optional visual caret icon inside the trigger.
• .Dropdown-Menu: The <ul> container for menu items.
• .Dropdown-Item: An individual menu link or button.
• .Dropdown-Divider: A horizontal rule to separate groups of items.