Menu Item

Atomic list item used across menus, dropdowns, command palettes, and navigation. Supports icons, chevrons, badges, and destructive states.

Sizes

Two sizes: MD (default) and SM for compact contexts.

html

Default (MD)

Small (SM)

<div class="vt-flex vt-flex-col vt-gap-1 vt-w-48">
  <div class="vt-command-item">Default (MD)</div>
  <div class="vt-command-item vt-text-xs vt-py-1">Small (SM)</div>
</div>

With Icon

Optional leading icon for visual context. Icon uses foreground-muted color for secondary weight.

html

Profile

Settings

Starred

Trash

<div class="vt-flex vt-flex-col vt-gap-1 vt-w-52">
  <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-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-star vt-w-4 vt-h-4 vt-text-foreground-muted vt-shrink-0">
      <path d="M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z"></path>
    </svg>
    Starred
  </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-trash-2 vt-w-4 vt-h-4 vt-text-foreground-muted vt-shrink-0">
      <path d="M10 11v6"></path><path d="M14 11v6"></path><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6"></path><path d="M3 6h18"></path><path d="M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path>
    </svg>
    Trash
  </div>
</div>

Right Slot

Optional right-side content: chevron for submenus, badge, or icon.

html

New Team

Inbox

Settings

<div class="vt-flex vt-flex-col vt-gap-1 vt-w-56">
  <div class="vt-command-item vt-justify-between">
    <div class="vt-flex vt-items-center vt-gap-2">
      <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>
      <span>New Team</span>
    </div>
    <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-right vt-w-4 vt-h-4 vt-text-foreground-muted vt-shrink-0">
      <path d="m9 18 6-6-6-6"></path>
    </svg>
  </div>
  <div class="vt-command-item vt-justify-between">
    <span>Inbox</span>
    <div class="vt-badge vt-badge-secondary">
      3
    </div>
  </div>
  <div class="vt-command-item vt-justify-between">
    <span>Settings</span>
    <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>
  </div>
</div>

States

Default, selected (active), and disabled states.

html

Default

Selected

Disabled

<div class="vt-flex vt-flex-col vt-gap-1 vt-w-48">
  <div class="vt-command-item">Default</div>
  <div class="vt-command-item vt-selected">Selected</div>
  <div class="vt-command-item" aria-disabled="true">Disabled</div>
</div>

Destructive

Red text and icon for actions that delete or remove data.

html

Delete item

Remove all

<div class="vt-flex vt-flex-col vt-gap-1 vt-w-56">
  <div class="vt-command-item vt-text-error-fill">
    <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-trash-2 vt-w-4 vt-h-4 vt-shrink-0">
      <path d="M10 11v6"></path><path d="M14 11v6"></path><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6"></path><path d="M3 6h18"></path><path d="M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path>
    </svg>
    Delete item
  </div>
  <div class="vt-command-item vt-text-error-fill vt-justify-between">
    <div class="vt-flex vt-items-center vt-gap-2">
      <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-trash-2 vt-w-4 vt-h-4 vt-shrink-0">
        <path d="M10 11v6"></path><path d="M14 11v6"></path><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6"></path><path d="M3 6h18"></path><path d="M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path>
      </svg>
      <span>Remove all</span>
    </div>
  </div>
</div>

Guidelines

Rows inside dropdown menus/commands: icon + label + shortcut. NOT standalone navigation → nav-item.

Profile

Settings

Pair each item with a muted leading icon for quick scanning.

Delete item

Remove all

Don't

Don't fill a menu with competing destructive red items.

API Reference

CSS classes for the Menu Item component.

Class	Type	Description
`vt-command-item`	Base	Menu item base: flex row, gap, padding, hover state, cursor
`vt-selected`	State	Selected/active state — highlighted background
`aria-disabled="true"`	State	Disabled state — 50% opacity, no pointer events
`vt-text-xs vt-py-1`	Size	SM size variant — smaller font and vertical padding
`vt-justify-between`	Layout	Pushes left content and right slot to opposite ends
`vt-text-error-fill`	Modifier	Destructive item — red text color for dangerous actions
`vt-text-foreground-muted`	Modifier	Icon color — muted for secondary visual weight

Accessibility

Keyboard and screen reader support.

Feature	Details
Role	Use role="menuitem" on each item inside a role="menu" container
Keyboard	Arrow keys move focus between items; Enter/Space activates
Disabled	Use aria-disabled="true" instead of the disabled attribute for menu items
Destructive	Add aria-label or visible text to clarify destructive intent