Dropdown

Dropdown primitives covering trigger, menu, content, and dropdown items.

Bulma Pattern

This wrapper follows Bulma's Components markup. Compare class behavior with the official Bulma docs.

Supported tags

Example

<dropdown active>
  <dropdown-trigger>
    <dropdown-button>Actions</dropdown-button>
  </dropdown-trigger>
  <dropdown-menu>
    <dropdown-content>
      <dropdown-item active href="/edit">Edit</dropdown-item>
      <dropdown-item href="/duplicate">Duplicate</dropdown-item>
      <dropdown-divider></dropdown-divider>
      <dropdown-item href="/archive">Archive</dropdown-item>
    </dropdown-content>
  </dropdown-menu>
</dropdown>

Usage Notes

Set `active` on `<dropdown>` to open the menu.
`<dropdown-button>` includes the angle icon and `aria-haspopup`.
`<dropdown-item>` keeps safe link handling and active state support, and renders a focusable `<button>` when it has no `href`.

Back to Components

Maintained by aldi

The source code is licensed under MIT.

Available on GitHub and npm.