Components

Dropdown

Click-to-open menu built on `<details>` — closes on outside click and Escape automatically.

html

<details class="b-dropdown">
  <summary class="b-btn b-btn-secondary">Actions ▾</summary>
  <div class="b-dropdown-menu">
    <div class="b-dropdown-label">Account</div>
    <a href="#">Profile</a>
    <a href="#">Settings</a>
    <hr>
    <button>Sign out</button>
  </div>
</details>

html

<details class="b-dropdown">
  <summary class="b-btn b-btn-secondary">Actions ▾</summary>
  <div class="b-dropdown-menu">
    <a href="#">Profile</a>
    <a href="#">Settings</a>
    <hr>
    <button>Sign out</button>
  </div>
</details>

With sections

html

<details class="b-dropdown">
  <summary class="b-btn">Open menu</summary>
  <div class="b-dropdown-menu" style="min-width:14rem">
    <div class="b-dropdown-label">Status</div>
    <button>● Online</button>
    <button>● Away</button>
    <hr>
    <div class="b-dropdown-label">Account</div>
    <a href="#">Profile</a>
    <a href="#">Sign out</a>
  </div>
</details>

Behavior

Without JS, <details> opens on click. The bundled JS adds:

Escape closes the menu and returns focus to the trigger
Outside click closes the menu

API

Class	Effect
`.b-dropdown`	Wrapper (use a `<details>` element)
`.b-dropdown-menu`	The popup panel
`.b-dropdown-label`	Section label inside the menu

Edit this page