Dropdown

A layered menu surface for grouped actions and navigation. Uses Floating UI positioning, supports nested submenus, and accepts custom trigger content via slot.

Default dropdown

Uses the built-in trigger (a diwa-button) and menuitem buttons as content.

<diwa-dropdown trigger-label="Actions" trigger-variant="secondary">
  <button role="menuitem" type="button" data-dropdown-value="edit">Edit</button>
  <button role="menuitem" type="button" data-dropdown-value="copy">Duplicate</button>
  <button role="menuitem" type="button" data-dropdown-value="archive">Archive</button>
</diwa-dropdown>

Custom trigger slot

Supply any trigger component through the trigger slot.

Project menu

<diwa-dropdown placement="bottom-end">
  <diwa-button slot="trigger" variant="primary" icon="chevron-down">Project menu</diwa-button>
  <button role="menuitem" type="button" data-dropdown-value="rename">Rename project</button>
  <button role="menuitem" type="button" data-dropdown-value="move">Move to workspace</button>
  <button role="menuitem" type="button" data-dropdown-value="settings">Project settings</button>
</diwa-dropdown>

Nested submenu

Place a second diwa-dropdown inside menu content and set submenu for side placement and submenu keyboard handling.

<diwa-dropdown trigger-label="Command palette" placement="bottom-start">
  <button role="menuitem" type="button" data-dropdown-value="new-file">New file</button>
  <diwa-dropdown submenu trigger-label="Share" trigger-size="sm">
    <button role="menuitem" type="button" data-dropdown-value="share-slack">Slack</button>
    <button role="menuitem" type="button" data-dropdown-value="share-email">Email</button>
    <button role="menuitem" type="button" data-dropdown-value="share-link">Copy link</button>
  </diwa-dropdown>
  <button role="menuitem" type="button" data-dropdown-value="delete">Delete</button>
</diwa-dropdown>

Implementation snippet

<diwa-dropdown trigger-label="Actions" trigger-variant="secondary">
  <button role="menuitem" type="button" data-dropdown-value="edit">Edit</button>
  <button role="menuitem" type="button" data-dropdown-value="copy">Duplicate</button>
  <button role="menuitem" type="button" data-dropdown-value="archive">Archive</button>
</diwa-dropdown>