Dropdown Menu — Veritheme

Default

A basic dropdown menu with items and a separator.

html

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

With Icons

Dropdown menu items with leading icons for visual context.

html

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

With Checkbox Items

Menu items with checkboxes for toggling settings.

html

<div class="vt-dropdown-wrap">
  <button data-dropdown-trigger="dd-3">View</button>
  <div id="dd-3" class="vt-dropdown-menu vt-w-56 vt-mt-2">
    <div class="vt-command-item" onclick="toggleCheckbox(this)">
      <div class="vt-w-4 vt-h-4 vt-mr-2 checkbox-indicator vt-bg-info-primary">
        <svg>...</svg>
      </div>
      Status Bar
    </div>
    <div class="vt-command-item" onclick="toggleCheckbox(this)">
      <div class="vt-w-4 vt-h-4 vt-mr-2 checkbox-indicator"></div>
      Activity Bar
    </div>
  </div>
</div>

With Radio Items

Menu items with radio buttons for single selection.

html

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

Anatomy

HTML structure of the Dropdown Menu component.

div (container)                            ← Position anchor
├── button[data-dropdown-trigger="id"]     ← Toggle trigger
└── div#id.vt-dropdown-menu               ← Floating menu panel
    ├── a.vt-dropdown-item                 ← Link item
    ├── button.vt-dropdown-item            ← Button item
    └── hr.vt-separator                    ← Group divider

API Reference

All CSS classes available for the Dropdown Menu component.

Class	Type	Description
`vt-dropdown-menu`	Base	Dropdown menu container with positioning and shadow
`vt-command-item`	Base	Individual menu item with hover and padding styles
`vt-open`	State	Shows the dropdown menu when added
`vt-text-error-primary`	Modifier	Destructive item text color
`vt-text-mains-quaternary`	Modifier	Muted text for icons and group labels
`vt-bg-info-primary`	State	Active checkbox fill color
`vt-border-info-primary`	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