# Dropdown Menu Item

## Usage

Helper component for custom item rendering with consistent styling. Host attributes and DOM event handlers (`aria-`, `data-`, `id`, drag and drop) reach the row root, the element carrying `role="menuitem"`.

```ts
import { DropdownMenuItem } from '@astryx-vue/core/DropdownMenu'
```

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

<template>
  <DropdownMenu :button="{ label: 'Actions' }">
    <DropdownMenuItem description="Rename, move, or change the cover" label="Edit project" />
    <DropdownMenuItem label="Duplicate project">
      <template #endContent>
        <Kbd keys="mod+d" />
      </template>
    </DropdownMenuItem>
    <DropdownMenuItem label="Delete project" variant="destructive" />
  </DropdownMenu>
</template>
```

## DropdownMenuItem Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `label` | `string \| number` | — | Primary text of the row. Use the `label` slot for rich content. |
| `description` | `string \| number` | — | Secondary line below the label. Use the `description` slot for rich content. |
| `icon` | `string \| Component` | — | Icon before the label: a CSS icon class (an UnoCSS class such as `i-carbon-copy`, or one of your own), or a component that draws the SVG. astryx-vue ships no icons. Use the `icon` slot for arbitrary content. |
| `isDisabled` | `boolean` | `false` | Disables the row. A disabled row is skipped by the arrow keys and by typeahead, and it does not respond to clicks. |
| `variant` | `'default' \| 'destructive'` | `'default'` | Visual variant. `destructive` recolors the label, description, and icon in the error color for dangerous actions such as Delete. The hover highlight stays the shared neutral, so it still matches every other row. |
| `hasCloseOnSelect` | `boolean` | `true` | Whether activating the row closes the menu. Set it to `false` for an action that reports its result on the row itself, such as a copy row. |
| `href` | `string` | — | Address the row navigates to. The row then renders as one anchor carrying `role="menuitem"`, so a ⌘/Ctrl-click and a middle click keep the browser's meaning. |
| `target` | `'_blank' \| '_self'` | — | Link target. Only used with `href`. |
| `rel` | `string` | — | Link relationship. Only used with `href`. `noopener` and `noreferrer` are added for `target="_blank"`. |
| `onClick` | `(event: MouseEvent) => void` | — | Called when the row is activated. On a link row it runs before the browser navigates, and it is skipped for a modified click, which the browser owns. |

## Events

| Name | Payload | Description |
| --- | --- | --- |
| `click` | `MouseEvent` | Fired when the row is activated, with the click that activated it. `@click` and `onClick` reach the same handler, so a row never runs one twice. |

## Slots

- `icon`: arbitrary leading content, replacing the `icon` prop.
- `label`: rich content replacing the `label` prop.
- `description`: rich content replacing the `description` prop.
- `endContent`: trailing content, such as a `Kbd` shortcut hint.

## Native attributes

The row root is the element carrying `role="menuitem"`: an `<a>` when `href` is set, otherwise the `Item` root. Attributes and DOM event handlers fall through to it, so `id`, `data-*`, `aria-*`, and drag-and-drop handlers all land on the row. `class` and `style` also reach that root, which is how a preview marks one row as highlighted.

The row takes its height from the menu's `size`, so it matches the trigger button without extra props.