Dropdown

Toggleable overlay menus for actions, navigation, and filter panels.

Basic dropdown

Toggle via data-open attribute on the container.

Code

<div class="dropdown" data-open>
  <button class="button trigger">Menu</button>
  <ul class="menu">
    <li><a href="#">Action 1</a></li>
    <li><a href="#">Action 2</a></li>
    <li><hr></li>
    <li><button>Delete</button></li>
  </ul>
</div>

Menu dividers

Use <hr> inside list items to separate groups of actions.

Code

<ul class="menu">
  <li><a href="#">View</a></li>
  <li><a href="#">Edit</a></li>
  <li><hr></li>
  <li><a href="#" disabled>Unavailable</a></li>
</ul>

End-aligned

Align the menu to the end edge with .dropdown--end.

Code

<div class="dropdown dropdown--end" data-open>...</div>

Upward

Open the menu above the trigger with .dropdown--up.

Code

<div class="dropdown dropdown--up" data-open>...</div>

Filter panel

Add .dropdown--panel for a content panel instead of a list of actions: a scrollable .body between an optional <header> and <footer>. Built on native <details>/<summary>, so it opens and closes without JavaScript. Add .chevron to the trigger icon to flip it while open. Checkbox rows push a trailing count to the end edge. Make the .menu a <form> and the footer buttons submit and reset it.

Code

<details class="dropdown dropdown--panel">
  <summary class="trigger button button--small">
    <span>Circles</span>
    <span class="text-muted">All</span>
    <svg class="icon chevron" aria-hidden="true">…</svg>
  </summary>
  <form class="menu" method="get">
    <div class="body" role="group" aria-label="Filter by circle">
      <label class="checkbox">
        <input type="checkbox" name="circle" value="design">
        <span>Design</span>
        <span class="text-muted">12<span class="visually-hidden"> members</span></span>
      </label>
    </div>
    <footer class="cluster cluster-between">
      <button type="reset" class="button button--small">Clear all</button>
      <button type="submit" class="button button--small button--accent">Apply</button>
    </footer>
  </form>
</details>
Circles All

Panel with header

A <header> sits above the body with a divider. Size the panel with --panel-inline-size and --panel-max-block-size; the body scrolls when the content is taller. Combine with .dropdown--end to hang the panel from the trigger's end edge.

Code

<form class="menu" method="get">
  <header class="cluster cluster-between">
    <strong class="text-sm">Status</strong>
    <button type="reset" class="button button--small">Clear</button>
  </header>
  <div class="body" role="group" aria-label="Filter by status">…</div>
  <footer class="cluster cluster-end">
    <button type="submit" class="button button--small button--accent">Apply</button>
  </footer>
</form>
Status 2
Status