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. Dismissal should be easy (Esc, clicking outside, or the trigger again) so people never feel trapped.

Basic dropdowns pair a button with a positioned panel. Use them for compact menus or action lists that complement the trigger. Ensure the button is focusable, toggles aria-expanded, and the panel is labelled via aria-controls so screen readers understand the relationship. Keep options in a simple list and avoid nesting unless the hierarchy is clear.

Best practices: trap focus within the open menu, return focus to the trigger on close, and set a predictable width so labels don’t wrap unpredictably. Avoid using hover-only activation—touch users need a tap target with visible state.

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

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. Keep the open state anchored to the trigger for keyboard users (Down Arrow to open, Esc to close).

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.

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

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

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

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

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

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

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. Make sure anchors have href or role="button" plus keyboard handlers (Enter/Space) so activation isn’t mouse-only.

Further reading: see Links and Knobs for styling guidance. Always manage focus like a button trigger, announce expanded state via aria-expanded, and avoid relying solely on color to indicate openness.

<div class="dropdown">
  <a tabindex="...">...</a>
  <nav class="panel arrow"></nav>
</div>

<div class="dropdown">
  <a tabindex="..." class="knob">...</a>
  <nav class="panel arrow"></nav>
</div>

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.

<div class="dropdown">
  <nav class="panel arrow">
    <ul class="checkboxes">...</ul>
  </nav>
</div>

<div class="dropdown">
  <nav class="panel arrow">
    <ul class="radios">...</ul>
  </nav>
</div>