Components

Dropdown

One .wckd-dropdown root; direct child button trigger and direct child ul menu. wckd-ui.js toggles open state, closes on outside click or Escape, and sets aria-haspopup, aria-controls, aria-expanded, and role="menuitem" where missing. Do not duplicate those in your markup.

Jump to:

Download & setup

Download WCKD UI Style guide

Load the kit from Get Started; use the style guide for utilities and tokens while wiring this component.

Default implementation

Default

Trigger and menu must stay direct children of .wckd-dropdown (the script uses :scope).

Markup

<div class="wckd-dropdown">
  <button type="button">Actions</button>
  <ul class="no-bullets">
    <li><a href="/edit">Edit</a></li>
    <li><button type="button">Duplicate</button></li>
  </ul>
</div>

Configuration options

Each variant keeps the same markup contract as the default; add only the classes or attributes named in the heading.

Icon trigger

Icon-only trigger: set aria-label (and optional data-tooltip for hover text).

  • Unread

Markup

<div class="wckd-dropdown">
  <button class="icon-button" type="button" aria-label="More actions">&#8942;</button>
  <ul class="no-bullets">
    <li><button type="button">Action one</button></li>
    <li><a href="/path">Action two</a></li>
  </ul>
</div>

When to use

  • Message list row actions (archive, mark unread, move).
  • Card overflow menus in dashboards and admin tables.
  • Toolbar overflow actions where horizontal space is limited.

Implementation notes

  • Keep the trigger button and menu ul as direct children of .wckd-dropdown.
  • The script sets ARIA on the trigger and items. Do not hand-copy aria-expanded / aria-controls unless you are overriding behaviour.
  • Use <button type="button"> for in-place actions and <a href> for navigation targets inside the menu.

Developer checklist

  • Provide an accessible trigger label via visible text or aria-label for icon-only buttons.
  • Keep menu labels short so touch targets remain clear and scannable.
  • Test keyboard flow: trigger open, tab through items, Escape to close.

← All components