Skip to main content
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

Flexible Link Type

Automatically chooses between <a> for hash links and Link from Inertia.js for other routes.

Customizable Icon and Label

Supports slots for adding icons and text, enabling easy customization of the link’s content.

Active State Styling

Includes an active prop to indicate and style the currently active link.

​
Usage

​
Basic Example

import { SidebarLink } from '@robojuice/velure-ui';
import { IconHome } from '@robojuice/velure-ui';

<SidebarLink href="/">
  <template #icon>
    <IconHome active name="HomeLine" size="20" />
  </template>
  Home
</SidebarLink>

​
Example with Custom Text Class

<SidebarLink href="/dashboard" text-class="text-gray-500">
  <template #icon>
    <IconDashboard name="DashboardLine" size="20" />
  </template>
  Dashboard
</SidebarLink>

​
Props

​
active
boolean
default:"false"
Determines whether the link is active.
​
href
string
default:"''"
The URL or hash the link should navigate to.
​
textClass
string
default:"''"
Custom class for styling the link’s text.
​
v-model
boolean
default:"false"
Used to dynamically bind the link’s active state.

​
Events

​
click
event
Triggered when the link is clicked. emit()

​
Slots

​
icon
slot
Slot for adding an icon to the link. <template #icon></template>
​
default
slot
Content displayed as the link’s label or text. <template #default></template>

​
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.