Dropdown

Toggleable overlay menus for actions and navigation.

Basic dropdown

Toggle via data-open attribute on the container.

<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>