# Side Nav Item

## Usage

Navigation item with icon, selected state, optional end content, and nesting support via children.

Put `SideNavItem` elements in the default slot of a `SideNav` or a `SideNavSection`. An item with children becomes a group: the chevron collapses it, and when the item also has an `href` the label navigates while the chevron opens the group. In a collapsed rail an item with children opens its children in a side popover. `end` sits at the trailing edge of the row.

```ts
import { SideNavItem } from '@astryx-vue/core/SideNav'
```

## Examples

Common configurations, variations, and states.

### Basic

Navigation links inside a SideNav, each with a label, an icon, and an href. Mark the item for the current page with isSelected.

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

<template>
  <SideNav>
    <SideNavItem href="#inbox" icon-class="i-carbon-email" is-selected label="Inbox" />
    <SideNavItem href="#documents" icon-class="i-carbon-document" label="Documents" />
  </SideNav>
</template>
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `label` | `string` | — | Visible name of the item. Becomes the accessible name of the icon-only row and of the collapsed popover. Required. |
| `href` | `string` | — | Navigation target URL. Without it the row is a button that only emits `click`. |
| `as` | `NavLinkComponent` | `'a'` | Custom link root component, such as `RouterLink`. It receives the address as `to` as well. Used only when there is an address. |
| `target` | `string` | — | Link `target`. A new-window target also adds `noopener noreferrer`. |
| `rel` | `string` | — | Link `rel`. Merged with the `noopener noreferrer` that a new-window target adds. |
| `iconClass` | `string` | — | Icon before the label, given as a CSS icon class such as `i-carbon-home`. An item without an icon is left out while the rail is collapsed. |
| `selectedIconClass` | `string` | — | Icon used instead of `iconClass` while the item is selected. |
| `isSelected` | `boolean` | `false` | Whether this is the current page. Sets `aria-current="page"` and the selected styles. |
| `isDisabled` | `boolean` | `false` | Whether the item is disabled. Blocks the default action and emits nothing. |
| `size` | `'sm' \| 'md' \| 'lg'` | `'md'` | Height and horizontal padding of the row. |
| `collapsible` | `boolean \| { defaultIsCollapsed?: boolean, isCollapsed?: boolean }` | — | Whether the children can be folded. Left unset, a row with children folds. `false` keeps them open. The object form sets the starting or the controlled state. |

## Events

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

## Slots

- `default`: child items. A row with children folds them into a group.
- `icon`: icon element before the label. An alternative to `iconClass`.
- `selectedIcon`: icon element used while the item is selected. Falls back to `icon`.
- `end`: content at the trailing edge of the row, such as a badge or a count.