Dropdown

Overview

Dropdowns display contextual actions, commands, or navigation options in an overlay menu. MiniKit provides an accessible custom element powered by the Popover API with automatic positioning, keyboard navigation, and focus management.

Basic Usage

Wrap a trigger button and popover menu inside an mk-dropdown element. The trigger uses popovertarget to associate itself with the menu.

<mk-dropdown>
  <button popovertarget="actions-menu" aria-haspopup="menu" aria-expanded="false">Actions</button>
  <div id="actions-menu" popover role="menu">
    <button role="menuitem">Edit</button>
    <button role="menuitem">Duplicate</button>
    <button role="menuitem">Delete</button>
  </div>
</mk-dropdown>

The dropdown automatically positions itself relative to the trigger and remains visible within the viewport.

Menu Items

Menu items can be buttons, links, or any focusable element using role="menuitem".

<mk-dropdown>
  <button popovertarget="account-menu" aria-haspopup="menu">Account</button>
  <div id="account-menu" popover role="menu">
    <a href="#profile" role="menuitem">Profile</a>
    <a href="#settings" role="menuitem">Settings</a>
    <hr />
    <button role="menuitem">Sign Out</button>
  </div>
</mk-dropdown>

Disabled Items

Disable menu items using either the native disabled attribute or aria-disabled="true".

<mk-dropdown>
  <button popovertarget="file-menu" aria-haspopup="menu">File</button>
  <div id="file-menu" popover role="menu">
    <button role="menuitem">New File</button>
    <button role="menuitem"disabled>Rename</button>
    <button role="menuitem" aria-disabled="true">Delete</button>
  </div>
</mk-dropdown>

Disabled items remain visible but are excluded from keyboard navigation.

Events

MiniKit emits custom events when the dropdown opens and closes.

const dropdown = document.querySelector('mk-dropdown');
dropdown.addEventListener('open', () => {
  console.log('opened');
});
dropdown.addEventListener('close', () => {
  console.log('closed');
});

These events can be used to synchronize UI state or perform additional actions when the menu visibility changes.

Accessibility

MiniKit follows common ARIA menu patterns and automatically manages focus when the menu opens and closes.

• Focus automatically moves to the first available menu item when the menu opens.
• Press ArrowDown to move to the next item.
• Press ArrowUp to move to the previous item.
• Press Escape to close the menu.
• Focus returns to the trigger when the menu closes.
• Disabled menu items are skipped during keyboard navigation.
• The trigger's aria-expanded state is automatically synchronized.

API

Markup

Events