# `m-sidebar-nav-item`

SidebarNavItem is a component that renders a sidebar navigation item with optional icon support. It handles active, locked, and external states, shows tooltips or floating items when the sidebar is collapsed, and supports click events.

## Props

| Name | Description | Type | Default |
|------|-------------|------|---------|
| `tag` |  | `string` | `li` |
| `id` | Identifier used for listbox controlling. | `string` | `crypto.randomUUID()` |
| `label*` | The text label displayed for the navigation item. | `string` |   |
| `href` | The URL the navigation item links to. | `string` |   |
| `locked` | Marks the item as locked. Shows a lock icon and prevents interaction. | `boolean` |   |
| `external` | Indicates the link is external. Opens in a new tab and shows an external link icon. | `boolean` |   |
| `active` | Marks the item as active, applying the active styling. | `boolean` |   |
| `onclick` | Callback to trigger when an item is clicked | `() => void` |   |
| `sub` |  | `boolean` |   |

## Slots

| Name | Description |
|------|-------------|
| `icon` | Use this slot to display an icon alongside the sidebar item. |

## Events

| Name | Description | Type |
|------|------|-------------|
| `item-click` | Emits when a navigation item is clicked. | `CustomEvent<void>` |

