Dropdowns

Toggleable menus and contextual actions. McGowanStyle supports both a wrapper-based markup and an explicit toggle/target API.

Wrapper pattern (declarative)

Use data-ms="dropdown" with an internal data-ms-trigger and data-ms-menu.

<div data-ms="dropdown">
  <button data-ms-trigger>Open menu</button>
  <div data-ms-menu class="ms-menu">...</div>
</div>

Toggle / target pattern

Use an explicit toggle with data-ms-toggle="dropdown" and data-ms-target="#menuId".

<button data-ms-toggle="dropdown" data-ms-target="#menu">Open</button>
<div id="menu" class="ms-menu" hidden>...</div>

Programmatic API

Attach dropdown behavior programmatically with McGowanStyle.dropdown.attachDropdown(toggle, menu).

const toggle = document.getElementById('progToggle');
const menu = document.getElementById('progMenu');
McGowanStyle.dropdown.attachDropdown(toggle, menu);