Dropdown Menu — uicraft

Default

A basic dropdown menu with items and a separator.

html

<div class="uc-relative uc-inline-block">
  <button data-dropdown-trigger="dd-1">Open Menu</button>
  <div id="dd-1" class="uc-dropdown-menu uc-w-48 uc-mt-2">
    <div class="uc-command-item">Profile</div>
    <div class="uc-command-item">Settings</div>
    <hr class="uc-my-1" />
    <div class="uc-command-item">Logout</div>
  </div>
</div>

With Icons

Dropdown menu items with leading icons for visual context.

html

<div class="uc-relative uc-inline-block">
  <button data-dropdown-trigger="dd-2">Options</button>
  <div id="dd-2" class="uc-dropdown-menu uc-w-56 uc-mt-2">
    <div class="uc-command-item">
      <svg>...</svg>
      Profile
    </div>
    <div class="uc-command-item">
      <svg>...</svg>
      Settings
    </div>
    <hr class="uc-my-1" />
    <div class="uc-command-item">
      <svg>...</svg>
      Log out
    </div>
  </div>
</div>

With Checkbox Items

Menu items with checkboxes for toggling settings.

html

<div class="uc-relative uc-inline-block">
  <button data-dropdown-trigger="dd-3">View</button>
  <div id="dd-3" class="uc-dropdown-menu uc-w-56 uc-mt-2">
    <div class="uc-command-item" onclick="toggleCheckbox(this)">
      <div class="uc-w-4 uc-h-4 uc-mr-2 checkbox-indicator uc-bg-accents-blue">
        <svg>...</svg>
      </div>
      Status Bar
    </div>
    <div class="uc-command-item" onclick="toggleCheckbox(this)">
      <div class="uc-w-4 uc-h-4 uc-mr-2 checkbox-indicator"></div>
      Activity Bar
    </div>
  </div>
</div>

With Radio Items

Menu items with radio buttons for single selection.

html

<div class="uc-relative uc-inline-block">
  <button data-dropdown-trigger="dd-4">Display Density</button>
  <div id="dd-4" class="uc-dropdown-menu uc-w-56 uc-mt-2">
    <div class="uc-text-xs uc-font-semibold uc-px-2 uc-py-1.5">Density</div>
    <hr class="uc-my-1" />
    <div class="uc-command-item" onclick="selectRadio(this)">
      <div class="uc-w-4 uc-h-4 uc-mr-2 uc-rounded-full radio-indicator"></div>
      Comfortable
    </div>
    <div class="uc-command-item" onclick="selectRadio(this)">
      <div class="uc-w-4 uc-h-4 uc-mr-2 uc-rounded-full radio-indicator uc-border-accents-blue">
        <div class="uc-w-2 uc-h-2 uc-rounded-full uc-bg-accents-blue"></div>
      </div>
      Compact
    </div>
  </div>
</div>

API Reference

All CSS classes available for the Dropdown Menu component.

Class	Type	Description
`uc-dropdown-menu`	Base	Dropdown menu container with positioning and shadow
`uc-command-item`	Base	Individual menu item with hover and padding styles
`uc-open`	State	Shows the dropdown menu when added
`uc-text-accents-red`	Modifier	Destructive item text color
`uc-text-fg-disabled`	Modifier	Muted text for icons and group labels
`uc-bg-accents-blue`	State	Active checkbox fill color
`uc-border-accents-blue`	State	Active radio border color

Accessibility

Keyboard and screen reader support.

Feature	Details
Role	Use role="menu" on dropdown, trigger has aria-haspopup="menu"
Items	Menu items use role="menuitem", checkable items use role="menuitemcheckbox"
Keyboard	Arrow keys navigate, Enter/Space activate, Escape closes menu
Expanded	Trigger has aria-expanded reflecting menu open/closed state
Focus	Focus moves to first item on open, returns to trigger on close