Skip to content

NavLink Component

The NavLink component is a reusable component for rendering individual navigation links in the sidebar.

Purpose and Utility

The NavLink component is designed to provide a consistent and customizable way to render navigation links. It supports:

  • Icons for visual representation.
  • Nested links for hierarchical navigation.
  • Badges and labels for additional context.

Example Usage

The NavLink component is used in the Sidebar component to render menu items:

<template>
  <ul class="nav">
    <NavLink
      :activeItem="activeItem"
      :header="$t('menu.start')"
      link="/start"
      iconName="flaticon-home-1"
      isHeader
    />
    <NavLink
      :activeItem="activeItem"
      :header="$t('menu.userManagement')"
      link="/user-management"
      iconName="flaticon-user-1"
      isHeader
    />
  </ul>
</template>

Props

  • badge (String): A badge displayed next to the link. Default is ''.
  • header (String): The text displayed for the link. Default is ''.
  • iconName (String): The icon class for the link. Default is ''.
  • c (String): Additional CSS classes for the link. Default is ''.
  • headerLink (String): The header link for nested links. Default is ''.
  • link (String): The route path for the link. Default is ''.
  • childrenLinks (Array): An array of child links for nested navigation. Default is null.
  • className (String): Additional CSS classes for the link container. Default is ''.
  • isHeader (Boolean): Whether the link is a top-level menu item. Default is false.
  • deep (Number): The depth of the link in a nested structure. Default is 0.
  • activeItem (String): The currently active menu item. Default is ''.
  • label (String): A label displayed next to the link. Default is undefined.
  • labelColor (String): The color of the label. Default is 'warning'.
  • index (String): The index of the link in the navigation structure. Default is undefined.

Methods

  • togglePanelCollapse(link): Toggles the visibility of nested links. Emits a togglePanelCollapse event with the link as a parameter.

Computed Properties

  • fullIconName: Combines the fi class with the iconName prop to generate the full icon class.

Notes

  • The NavLink component is highly customizable and supports both single-level and multi-level navigation.
  • It uses BootstrapVue's b-collapse for collapsible nested links.
  • The fullIconName computed property ensures consistent icon styling.