Dropdown

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

<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

<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
• Arrow Down on the closed trigger opens the menu and moves focus to the first item
• Arrow Down / Arrow Up cycle through the menu items, Home / End jump to the first and last
• aria-expanded is mirrored onto the <summary> so the trigger's state is readable from CSS and from assistive tech

Menu items keep their native roles — a <a> stays a link and a <button> stays a button. The menu is deliberately not given role="menu", which would suppress those semantics and commit the component to the full menu keyboard model.

API