# Breadcrumb Item

## Usage

BreadcrumbItem represents one destination, action, current location, or sibling-menu trigger inside a Breadcrumbs trail.

Items after the first take their separator from the trail. `href` makes the crumb a link; without an address it is a button, and `isCurrent` turns it into plain text marked `aria-current="page"`. `menu` turns the crumb into a menu trigger for sibling destinations, which is why it and `href` are mutually exclusive.

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

<template>
  <Breadcrumbs>
    <BreadcrumbItem href="#home">
      Home
    </BreadcrumbItem>
    <BreadcrumbItem href="#settings">
      Settings
    </BreadcrumbItem>
    <BreadcrumbItem is-current>
      Profile
    </BreadcrumbItem>
  </Breadcrumbs>
</template>
```

## Examples

Common configurations, variations, and states.

### Basic

Breadcrumb links inside a Breadcrumbs trail. Ancestor pages get an href; mark the last item with isCurrent to render it as plain text for the current page.

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

<template>
  <Breadcrumbs>
    <BreadcrumbItem href="#home">
      Home
    </BreadcrumbItem>
    <BreadcrumbItem href="#settings">
      Settings
    </BreadcrumbItem>
    <BreadcrumbItem is-current>
      Profile
    </BreadcrumbItem>
  </Breadcrumbs>
</template>
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `href` | `string` | — | Link URL. Omit it and the crumb is a button. Mutually exclusive with `menu`: a menu crumb is a trigger, not a link. |
| `as` | `NavLinkComponent` | `'a'` | Link root component, such as a router link. Used instead of `a` for items that have an `href` and are not current. |
| `isCurrent` | `boolean` | `false` | Marks this crumb as the current page. Renders as a `<span>` with `aria-current="page"`. A current crumb can still open a menu. |
| `menu` | `BreadcrumbMenuOption[]` | — | Turns the crumb into a menu trigger for sibling destinations. The array matches the dropdown menu's data entries, including dividers, checkbox rows, and radio groups. Ignored when the `menu` slot is used. |
| `menuSize` | `'sm' \| 'md' \| 'lg'` | `sm` on the supporting variant, otherwise `md` | Size of the menu rows. |

## Slots

- `default`: the crumb label.
- `startIcon`: icon before the label.
- `menu`: menu content written by hand, including checkbox and radio rows. Used instead of the `menu` array.

## Events

- `click(event: MouseEvent)`: fires when the crumb is clicked. A current crumb blocks the default action and emits nothing.