> ## Documentation Index
> Fetch the complete documentation index at: https://docs.velure.dev/llms.txt
> Use this file to discover all available pages before exploring further.

# Sidebar Link

> SidebarLink.vue Component Documentation

The `SidebarLink.vue` component is a versatile navigation link designed for use in sidebar menus. It supports both internal and external links, provides an option for active state styling, and allows for custom icons and labels through slots.

***

## Features

<CardGroup cols={2}>
  <Card title="Flexible Link Type" icon="square-1">
    Automatically chooses between <code>\<a></code> for hash links and <code>Link</code> from Inertia.js for other routes.
  </Card>

  <Card title="Customizable Icon and Label" icon="square-2">
    Supports slots for adding icons and text, enabling easy customization of the link's content.
  </Card>

  <Card title="Active State Styling" icon="square-3">
    Includes an <code>active</code> prop to indicate and style the currently active link.
  </Card>
</CardGroup>

***

## Usage

### Basic Example

```js theme={null}
import { SidebarLink } from '@robojuice/velure-ui';
import { IconHome } from '@robojuice/velure-ui';
```

```vue theme={null}
<SidebarLink href="/">
  <template #icon>
    <IconHome active name="HomeLine" size="20" />
  </template>
  Home
</SidebarLink>
```

### Example with Custom Text Class

```vue theme={null}
<SidebarLink href="/dashboard" text-class="text-gray-500">
  <template #icon>
    <IconDashboard name="DashboardLine" size="20" />
  </template>
  Dashboard
</SidebarLink>
```

***

## Props

<ParamField path="active" type="boolean" default="false">
  Determines whether the link is active.
</ParamField>

<ParamField path="href" type="string" default="''">
  The URL or hash the link should navigate to.
</ParamField>

<ParamField path="textClass" type="string" default="''">
  Custom class for styling the link's text.
</ParamField>

<ParamField path="v-model" type="boolean" default="false">
  Used to dynamically bind the link's active state.
</ParamField>

***

## Events

<ParamField path="click" type="event">
  Triggered when the link is clicked. `emit()`
</ParamField>

***

## Slots

<ParamField path="icon" type="slot">
  Slot for adding an icon to the link. `<template #icon></template>`
</ParamField>

<ParamField path="default" type="slot">
  Content displayed as the link's label or text. `<template #default></template>`
</ParamField>

***

## Notes

* Automatically switches between `<a>` and Inertia's `Link` component based on the `href` value.
* The `#icon` slot allows for seamless integration of custom icons, such as those from a component library.

For additional customization, refer to the source code of the component.