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
Example with Custom Text Class
Props
boolean
default:"false"
Determines whether the link is active.
string
default:"''"
The URL or hash the link should navigate to.
string
default:"''"
Custom class for styling the link’s text.
boolean
default:"false"
Used to dynamically bind the link’s active state.
Events
event
Triggered when the link is clicked.
emit()Slots
slot
Slot for adding an icon to the link.
<template #icon></template>slot
Content displayed as the link’s label or text.
<template #default></template>Notes
- Automatically switches between
<a>and Inertia’sLinkcomponent based on thehrefvalue. - The
#iconslot allows for seamless integration of custom icons, such as those from a component library.