Dropdowns

Dropdowns reveal more choices without overwhelming the layout, pairing a trigger with a lightweight panel. They’re ideal for secondary actions, compact menus, or filters that don’t warrant a full page—just be sure the trigger is clearly interactive and reachable by keyboard.

Keep the content inside concise: predictable labels, grouped options, and clear hover/focus states borrowed from your button and link patterns. A dropdown is a <details> element: its <summary> is the trigger, and the panel opens and closes when the summary is clicked or pressed with Enter or Space. Screen readers announce whether it is open. No script is needed.

Basic dropdowns pair a trigger with a positioned panel. Give the <summary> the class button to make it look like a button, with a color class if you like. Add the open attribute to show the panel from the start, as in the first example. Keep options in a simple list and avoid nesting unless the hierarchy is clear.

Closing: a <details> dropdown closes when its summary is used again. It stays open when the focus moves away or someone clicks elsewhere. Where that matters, a few lines of script can close it on Esc or on a click outside by removing the open attribute.

<details class="dropdown">
  <summary class="button">...</summary>
  <nav class="panel arrow">
    <ul>
      <li><a href="...">...</a></li>
      <li><a href="...">...</a></li>
      <li><a href="...">...</a></li>
    </ul>
  </nav>
</details>

E-ink: in the e-ink theme a dropdown panel has a solid black border instead of a shadow and appears at once, without fading in. E-ink devices have no pointer that hovers; a dropdown opens with a tap on its trigger.

Dropdown placement should mirror the trigger position and available space: place the panel below by default, flip above when near the viewport bottom, and align left/center/right to the trigger so the arrow points back to its source. The classes on the panel choose its place; the browser doesn’t move it when it runs out of room.

Positioning & references: adjust placement responsively to prevent clipping and ensure the menu stays within the viewport. Style triggers using patterns from Buttons, and learn more about the panel surface and arrow treatments on the Panels page.

<details class="dropdown">
  <summary class="button">...</summary>
  <nav class="panel arrow bottom right"></nav>
</details>

<details class="dropdown">
  <summary class="button">...</summary>
  <nav class="panel arrow bottom center"></nav>
</details>

<details class="dropdown">
  <summary class="button">...</summary>
  <nav class="panel arrow bottom left"></nav>
</details>

<details class="dropdown">
  <summary class="button">...</summary>
  <nav class="panel arrow top right"></nav>
</details>

<details class="dropdown">
  <summary class="button">...</summary>
  <nav class="panel arrow top center"></nav>
</details>

<details class="dropdown">
  <summary class="button">...</summary>
  <nav class="panel arrow top left"></nav>
</details>

Link-triggered dropdowns are handy in navigation bars or inline contexts where the control should still behave like a link (e.g., a section title with quick actions). Knob triggers add pill styling for touch-friendly menus. The trigger is still a <summary>: the class link makes it look like a link and knob like a knob. An <a> without an href can’t be reached with the keyboard, so don’t use one as a trigger.

Further reading: see Links and Knobs for styling guidance. The open state is announced by the <details> element itself.

<details class="dropdown">
  <summary class="link">...</summary>
  <nav class="panel arrow"></nav>
</details>

<details class="dropdown">
  <summary class="knob">...</summary>
  <nav class="panel arrow"></nav>
</details>

Filter dropdowns bundle checkboxes or radios into a compact panel so users can adjust criteria without leaving the page. Group related options, add a header for context, and keep inputs keyboard-focusable with visible states. For radios, ensure a single selection per group; for checkboxes, consider a clear-all action when lists are long.

Filtering tips: announce filter changes inline (e.g., selected count) and debounce any live queries to avoid flicker. See Checkboxes & radios for input styling and accessibility guidance.

<details class="dropdown">
  <summary class="button">...</summary>
  <nav class="panel arrow">
    <ul class="checkboxes">...</ul>
  </nav>
</details>

<details class="dropdown">
  <summary class="button">...</summary>
  <nav class="panel arrow">
    <ul class="radios">...</ul>
  </nav>
</details>

When a script decides when a dropdown opens, for example to close it on Esc or to load its content first, use a <button> with aria-expanded right in front of the panel. The panel shows while aria-expanded="true" and stays hidden while it is "false". Screen readers announce the same state, so the look and the announcement can’t disagree.

<div class="dropdown">
  <button type="button" aria-expanded="false" aria-controls="menu">...</button>
  <nav class="panel arrow" id="menu">...</nav>
</div>

The older form: a <div class="dropdown"> without aria-expanded opens while something in it has the focus. It still works, but it can’t be closed without moving the focus away, and screen readers don’t hear whether it is open. Use <details> for new work.