Dropdown Menu

Displays a menu of actions or options triggered by a button.

Interactive Requires: veritheme.js JS init: automatic

Default

A basic dropdown menu with items and a separator.

html

<div class="vt-dropdown-wrap">
  <button class="vt-btn vt-btn-bordered" data-dropdown-trigger="dd-default">

    Open Menu
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="lucide lucide-chevron-down vt-w-4 vt-h-4 vt-ml-2 vt-text-foreground-muted">
      <path d="m6 9 6 6 6-6"></path>
    </svg>
  </button>
  <div id="dd-default" class="vt-dropdown-menu vt-w-48 vt-top-full vt-left-0 vt-mt-2" data-dropdown-content="">
    <div class="vt-command-item">
      Profile
    </div>
    <div class="vt-command-item">
      Settings
    </div>
    <div class="vt-command-item">
      Billing
    </div>
    <div class="vt-separator vt-separator-h vt-my-1"></div>
    <div class="vt-command-item vt-text-error-fill">
      Logout
    </div>
  </div>
</div>

With Icons

Dropdown menu items with leading icons for visual context.

html

<div class="vt-dropdown-wrap">
  <button class="vt-btn vt-btn-bordered" data-dropdown-trigger="dd-icons">

    Options
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="lucide lucide-chevron-down vt-w-4 vt-h-4 vt-ml-2 vt-text-foreground-muted">
      <path d="m6 9 6 6 6-6"></path>
    </svg>
  </button>
  <div id="dd-icons" class="vt-dropdown-menu vt-w-56 vt-top-full vt-left-0 vt-mt-2" data-dropdown-content="">
    <div class="vt-command-item">

      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="lucide lucide-user vt-w-4 vt-h-4 vt-text-foreground-muted vt-shrink-0">
        <path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2"></path><circle cx="12" cy="7" r="4"></circle>
      </svg>
      Profile
    </div>
    <div class="vt-command-item">

      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="lucide lucide-settings vt-w-4 vt-h-4 vt-text-foreground-muted vt-shrink-0">
        <path d="M9.671 4.136a2.34 2.34 0 0 1 4.659 0 2.34 2.34 0 0 0 3.319 1.915 2.34 2.34 0 0 1 2.33 4.033 2.34 2.34 0 0 0 0 3.831 2.34 2.34 0 0 1-2.33 4.033 2.34 2.34 0 0 0-3.319 1.915 2.34 2.34 0 0 1-4.659 0 2.34 2.34 0 0 0-3.32-1.915 2.34 2.34 0 0 1-2.33-4.033 2.34 2.34 0 0 0 0-3.831A2.34 2.34 0 0 1 6.35 6.051a2.34 2.34 0 0 0 3.319-1.915"></path><circle cx="12" cy="12" r="3"></circle>
      </svg>
      Settings
    </div>
    <div class="vt-separator vt-separator-h vt-my-1"></div>
    <div class="vt-command-item">

      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="lucide lucide-plus vt-w-4 vt-h-4 vt-text-foreground-muted vt-shrink-0">
        <path d="M5 12h14"></path><path d="M12 5v14"></path>
      </svg>
      New Team
    </div>
    <div class="vt-separator vt-separator-h vt-my-1"></div>
    <div class="vt-command-item">

      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="lucide lucide-log-out vt-w-4 vt-h-4 vt-text-foreground-muted vt-shrink-0">
        <path d="m16 17 5-5-5-5"></path><path d="M21 12H9"></path><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"></path>
      </svg>
      Log out
    </div>
  </div>
</div>

With Checkbox Items

Menu items with checkboxes for toggling settings.

html

<div class="vt-dropdown-wrap">
  <button class="vt-btn vt-btn-bordered" data-dropdown-trigger="dd-check">

    View
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="lucide lucide-chevron-down vt-w-4 vt-h-4 vt-ml-2 vt-text-foreground-muted">
      <path d="m6 9 6 6 6-6"></path>
    </svg>
  </button>
  <div id="dd-check" class="vt-dropdown-menu vt-w-56 vt-top-full vt-left-0 vt-mt-2" data-dropdown-content="">
    <div class="vt-command-item" onclick="toggleCheckbox(this)">

      <div class="vt-w-4 vt-h-4 vt-flex vt-items-center vt-justify-center vt-rounded vt-border vt-border-border-strong checkbox-indicator vt-bg-brand-fill vt-text-generic-white vt-border-transparent vt-shrink-0">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="lucide lucide-check vt-w-3 vt-h-3">
          <path d="M20 6 9 17l-5-5"></path>
        </svg>
      </div>
      Status Bar
    </div>
    <div class="vt-command-item" onclick="toggleCheckbox(this)">

      <div class="vt-w-4 vt-h-4 vt-flex vt-items-center vt-justify-center vt-rounded vt-border vt-border-border-strong checkbox-indicator vt-shrink-0">
      </div>
      Activity Bar
    </div>
    <div class="vt-command-item" onclick="toggleCheckbox(this)">

      <div class="vt-w-4 vt-h-4 vt-flex vt-items-center vt-justify-center vt-rounded vt-border vt-border-border-strong checkbox-indicator vt-shrink-0">
      </div>
      Panel
    </div>
  </div>
</div>

With Radio Items

Menu items with radio buttons for single selection.

html

<div class="vt-dropdown-wrap">
  <button class="vt-btn vt-btn-bordered" data-dropdown-trigger="dd-radio">

    Display Density
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="lucide lucide-chevron-down vt-w-4 vt-h-4 vt-ml-2 vt-text-foreground-muted">
      <path d="m6 9 6 6 6-6"></path>
    </svg>
  </button>
  <div id="dd-radio" class="vt-dropdown-menu vt-w-56 vt-top-full vt-left-0 vt-mt-2" data-dropdown-content="">
    <div class="vt-text-xs vt-font-semibold vt-text-foreground-muted vt-px-2 vt-py-1.5">Density</div>
    <div class="vt-separator vt-separator-h vt-my-1"></div>
    <div class="vt-command-item" onclick="selectMenuRadio(this)">

      <div class="vt-w-4 vt-h-4 vt-rounded-full vt-border vt-border-border-strong vt-flex vt-items-center vt-justify-center radio-indicator vt-shrink-0">
      </div>
      Comfortable
    </div>
    <div class="vt-command-item" onclick="selectMenuRadio(this)">

      <div class="vt-w-4 vt-h-4 vt-rounded-full vt-border vt-border-brand-fill vt-flex vt-items-center vt-justify-center radio-indicator vt-shrink-0">
        <div class="vt-w-2 vt-h-2 vt-rounded-full vt-bg-brand-fill"></div>
      </div>
      Compact
    </div>
    <div class="vt-command-item" onclick="selectMenuRadio(this)">

      <div class="vt-w-4 vt-h-4 vt-rounded-full vt-border vt-border-border-strong vt-flex vt-items-center vt-justify-center radio-indicator vt-shrink-0">
      </div>
      Touch
    </div>
  </div>
</div>

Guidelines

Menu of actions on a trigger (row actions, account menu). NOT for choosing a form value → select.

Profile

Settings

Log out

Set destructive items apart with the danger style.

United States

Canada

Mexico

Don't

Don't use a menu to choose a form value — use a select.

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-fill`	Modifier	Destructive item text color
`vt-text-foreground-muted`	Modifier	Muted text for icons and group labels
`vt-bg-brand-fill`	State	Active checkbox fill color
`vt-border-brand-fill`	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

Built with:

Button MenuItem Checkbox Radio Group Icons Separator