Dropdown

An interactive element that – when activated – can expose one or more options inside a menu.

Example

Code sample

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<nav>
  <div class="dropdown" data-controller="dropdown">
    <input type="checkbox" role="button" aria-haspopup="true" id="dropdown_example" data-action="change->dropdown#toggle" data-dropdown-target="checkbox">
    <label for="dropdown_example" class="dropdown_trigger">
      <span>
        Solutions
      </span>
    </label>
    <div role="menu" class="dropdown_menu">
      <ul>
        <li>
          <a href="#/solutions/event-registration/">
            Event registration
          </a>
        </li>
        <li>
          <a href="#/solutions/ticketing-only/">
            Ticketing only
          </a>
        </li>
      </ul>
    </div>
  </div>
</nav>

Usage notes

Esc keypresses should close any open dropdowns.
Clicking outside of an open dropdown will close the open dropdown

Source files