# Context Menu Item

## Usage

Menu item component for compound mode. Re-exported from `DropdownMenuItem` for discoverability.

```ts
import { ContextMenuItem } from '@astryx-vue/core/ContextMenu'
```

One action row inside a [Context Menu](/en/components/context-menu). Reach for it when the panel is written by hand with the `content` slot instead of the `items` array; both forms draw the same row, so the styling cannot drift.

## Examples

Common configurations, variations, and states.

### Basic

Context menu items with labels and secondary descriptions. Use ContextMenuItem to render custom menu entries with consistent styling.

```vue
<script setup lang="ts">
import { ContextMenu, ContextMenuItem } from '@astryx-vue/core/ContextMenu'
</script>

<template>
  <div class="context-menu-item-preview">
    <ContextMenu label="File actions">
      <div class="context-menu-item-preview__trigger">
        Right-click this area
      </div>
      <template #content>
        <ContextMenuItem description="Modify this item" label="Edit" />
        <ContextMenuItem description="Create a copy" label="Duplicate" />
        <ContextMenuItem description="This action cannot be undone" label="Delete" />
      </template>
    </ContextMenu>
  </div>
</template>
```

## ContextMenuItem Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `label` | `string \| number` | — | Primary label of the row. Use the `label` slot for rich content. |
| `description` | `string` | — | Secondary text rendered below the label. Use the `description` slot for rich content. |
| `icon` | `string \| Component` | — | Icon rendered before the label: a CSS icon class or a component that draws the SVG. Use the `icon` slot for arbitrary content. |
| `endContent` | `string \| number` | — | Plain text rendered after the label area. Use the `endContent` slot for rich trailing content such as a badge. |
| `href` | `string` | — | Address the row navigates to; the row then renders as an anchor. |
| `target` | `'_blank' \| '_self'` | — | Link target, only used with `href`. |
| `rel` | `string` | — | Link relationship, only used with `href`. |
| `isDisabled` | `boolean` | `false` | Whether the row is disabled. A disabled row is dimmed, skipped by arrow keys and typeahead, and cannot be activated. |
| `hasCloseOnSelect` | `boolean` | `true` | Whether activating the row closes the menu. |
| `variant` | `'default' \| 'destructive'` | `'default'` | Visual variant of the row. |

## Events

| Name | Payload | Description |
| --- | --- | --- |
| `click` | `MouseEvent` | Fired when the row is activated, with the click that activated it. |

## Slots

- `label`: rich content replacing the `label` prop.
- `icon`: leading content replacing the `icon` prop.
- `description`: rich content replacing the `description` prop.
- `endContent`: trailing content after the label area.

The row is `role="menuitem"`, so the keyboard belongs to the menu above it: arrow keys, `Home`, `End`, and typeahead move between rows.