Menu Item — Veritheme

Sizes

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

html

Default (MD)

Small (SM)

<div class="vt-command-item vt-text-sm">Default (MD)</div>
<div class="vt-command-item vt-text-xs vt-py-1">Small (SM)</div>

With Icon

Optional leading icon for visual context. Icon uses mains-quaternary color for secondary weight.

html

Profile

Settings

Starred

Trash

<div class="vt-command-item">
  <svg class="vt-w-4 vt-h-4 vt-text-mains-quaternary" /><!-- icon -->
  Profile
</div>
<div class="vt-command-item">
  <svg class="vt-w-4 vt-h-4 vt-text-mains-quaternary" /><!-- icon -->
  Settings
</div>

Right Slot

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

html

New Team

Inbox

3

Settings

<div class="vt-command-item vt-justify-between">
  <span>New Team</span>
  <svg class="vt-w-4 vt-h-4 vt-text-mains-quaternary"><!-- chevron-right --></svg>
</div>
<div class="vt-command-item vt-justify-between">
  <span>Inbox</span>
  <div class="vt-badge vt-badge-secondary">3</div>
</div>

States

Default, selected (active), and disabled states.

html

Default

Selected

Disabled

<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>

Destructive

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

html

Delete item

Remove all

<div class="vt-command-item vt-text-error-primary">
  <svg class="vt-w-4 vt-h-4 vt-shrink-0"><!-- trash --></svg>
  Delete item
</div>
<div class="vt-command-item vt-text-error-primary vt-justify-between">
  <div class="vt-flex vt-items-center vt-gap-2">
    <svg class="vt-w-4 vt-h-4 vt-shrink-0"><!-- trash --></svg>
    <span>Remove all</span>
  </div>
</div>

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-primary`	Modifier	Destructive item — red text color for dangerous actions
`vt-text-mains-quaternary`	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