Base

Class	Description
.ui-dropdown-menu	Base class

Open

Class	Description
.ui-dropdown-menu--open	open

Top

Class	Description
.ui-dropdown-menu--top	top

Align-end

Class	Description
.ui-dropdown-menu--align-end	align-end

Full-width

Class	Description
.ui-dropdown-menu--full-width	full-width

Override these CSS custom properties to customize the component.

Token	Default	Description
--ui-dropdown-menu-z	var(--ui-z-index-dropdown)	Z-index stacking order
--ui-dropdown-menu-panel-offset	var(--ui-space-1)	Panel offset from anchor
--ui-dropdown-menu-panel-min-width	auto	Panel minimum width

<div class="ui-dropdown-menu ui-dropdown-menu--open">
  <button class="ui-dropdown-menu__trigger ui-button ui-button--secondary" type="button">File</button>
  <div class="ui-dropdown-menu__panel" role="menu">
    <div class="ui-menu">
      <ul class="ui-menu__group">
        <li>
          <button class="ui-menu__item" role="menuitem">New</button>
        </li>
        <li>
          <button class="ui-menu__item" role="menuitem">Open</button>
        </li>
        <li>
          <button class="ui-menu__item" role="menuitem">Save</button>
        </li>
        <li>
          <hr class="ui-menu__separator">
        </li>
        <li>
          <button class="ui-menu__item ui-menu__item--danger" role="menuitem">Close</button>
        </li>
      </ul>
    </div>
  </div>
</div>

<!-- Opens panel above the trigger. -->
<div class="ui-dropdown-menu ui-dropdown-menu--open ui-dropdown-menu--top">
  <button class="ui-dropdown-menu__trigger ui-button">Actions</button>
  <div class="ui-dropdown-menu__panel" role="menu">
    <div class="ui-menu">
      <ul class="ui-menu__group">
        <li><button class="ui-menu__item" role="menuitem">Edit</button></li>
        <li><button class="ui-menu__item" role="menuitem">Delete</button></li>
      </ul>
    </div>
  </div>
</div>

<!-- Panel stretches to match trigger width. -->
<div class="ui-dropdown-menu ui-dropdown-menu--open ui-dropdown-menu--full-width">
  <button class="ui-dropdown-menu__trigger ui-button">Select option</button>
  <div class="ui-dropdown-menu__panel" role="menu">
    <div class="ui-menu">
      <ul class="ui-menu__group">
        <li><button class="ui-menu__item" role="menuitem">Option A</button></li>
        <li><button class="ui-menu__item" role="menuitem">Option B</button></li>
      </ul>
    </div>
  </div>
</div>

<div class="ui-flex ui-justify-end">
  <div class="ui-dropdown-menu ui-dropdown-menu--open ui-dropdown-menu--align-end">
    <button class="ui-dropdown-menu__trigger ui-button ui-button--ghost" type="button">⋮</button>
    <div class="ui-dropdown-menu__panel" role="menu">
      <div class="ui-menu">
        <ul class="ui-menu__group">
          <li>
            <button class="ui-menu__item" role="menuitem">View</button>
          </li>
          <li>
            <button class="ui-menu__item" role="menuitem">Share</button>
          </li>
          <li>
            <button class="ui-menu__item ui-menu__item--danger" role="menuitem">Remove</button>
          </li>
        </ul>
      </div>
    </div>
  </div>
</div>