← Specimen

Dropdown

The one interactive component here — a real Custom Element, no framework. State (open / closed) lives on the host as an open attribute, so the CSS in main.css drives visibility and the JS only ever toggles that one attribute.

Example

Edit Duplicate Delete

<ds-dropdown class="relative inline-block">
  <button data-dropdown-trigger class="btn-secondary">Options</button>
  <div data-dropdown-menu class="absolute left-0 mt-xs w-40 card p-2xs">
    <a href="#">Edit</a>
    <a href="#">Duplicate</a>
    <a href="#">Delete</a>
  </div>
</ds-dropdown>