Menu Item — uicraft

Sizes

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

html

Default (MD)

Small (SM)

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

With Icon

Optional leading icon for visual context. Icon uses fg-disabled color for secondary weight.

html

Profile

Settings

Starred

Trash

<div class="uc-command-item">
  <svg class="uc-w-4 uc-h-4 uc-text-fg-disabled" /><!-- icon -->
  Profile
</div>
<div class="uc-command-item">
  <svg class="uc-w-4 uc-h-4 uc-text-fg-disabled" /><!-- icon -->
  Settings
</div>

Right Slot

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

html

New Window ⌘N

New Team

Inbox

3

Settings

<div class="uc-command-item uc-justify-between">
  <span>New Window</span>
  <kbd class="uc-kbd">⌘N</kbd>
</div>
<div class="uc-command-item uc-justify-between">
  <span>New Team</span>
  <svg class="uc-w-4 uc-h-4 uc-text-fg-disabled"><!-- chevron-right --></svg>
</div>
<div class="uc-command-item uc-justify-between">
  <span>Inbox</span>
  <div class="uc-badge uc-badge-secondary">3</div>
</div>

States

Default, selected (active), and disabled states.

html

Default

Selected

Disabled

<div class="uc-command-item">Default</div>
<div class="uc-command-item uc-selected">Selected</div>
<div class="uc-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="uc-command-item uc-text-accents-red">
  <svg class="uc-w-4 uc-h-4 uc-shrink-0"><!-- trash --></svg>
  Delete item
</div>
<div class="uc-command-item uc-text-accents-red uc-justify-between">
  <div class="uc-flex uc-items-center uc-gap-2">
    <svg class="uc-w-4 uc-h-4 uc-shrink-0"><!-- trash --></svg>
    <span>Remove all</span>
  </div>
  <kbd class="uc-kbd">⌘⌫</kbd>
</div>

API Reference

CSS classes for the Menu Item component.

Class	Type	Description
`uc-command-item`	Base	Menu item base: flex row, gap, padding, hover state, cursor
`uc-selected`	State	Selected/active state — highlighted background
`aria-disabled="true"`	State	Disabled state — 50% opacity, no pointer events
`uc-text-xs uc-py-1`	Size	SM size variant — smaller font and vertical padding
`uc-justify-between`	Layout	Pushes left content and right slot to opposite ends
`uc-text-accents-red`	Modifier	Destructive item — red text color for dangerous actions
`uc-text-fg-disabled`	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
Shortcuts	Keyboard shortcut hints are decorative — use aria-keyshortcuts on the item