Breadcrumb

Overview

The Breadcrumb component in UiKit is highly customizable through SASS variables. It allows defining styles globally in ui-kit/src/styles/components/_breadcrumbs.sass (for aspects like spacing) and component-specific styles in ui-kit/src/components/VBreadcrumbs/index.sass.

Basic

To add the Breadcrumb component, start by importing it into your Vue file:

import VBreadcrumbs from 'UiKit/components/VBreadcrumbs/VBreadcrumbs.vue';

Example

Place the component in your template like this:

<VBreadcrumbs
    :slug="slug"
    :data="breadcrumbsList"
/>

• slug: A unique identifier for the current page.
• breadcrumbsList: An array of breadcrumb items.

Breadcrumb List Example:

const breadcrumbsList = [
    { link: '/', name: 'Home' },
    { link: '/ui-kit', name: 'UiKit' },
    { name: 'Breadcrumb' }  // No link for the current page
];

Here, the last breadcrumb does not have a link property because it represents the current page.

Component Props

defineProps({
  data: {
    type: Array as PropType<IBreadcrumb[]>,
    required: true,
  },
  slug: String,
});

The data prop expects an array of breadcrumb items, each of which follows the IBreadcrumb interface:

interface IBreadcrumb {
  name: string;
  routeTo?: object;
  link?: string;
}

• name: The text displayed for each breadcrumb.
• link: (Optional) URL string to navigate to when clicked.
• routeTo: (Optional) Vue Router’s route location to navigate to when clicked. Use this for internal navigation with Vue Router.

Separator Customization

The default separator between breadcrumb items is /. You can customize this by using the default slot. For example, to use a hyphen - as a separator:

<VBreadcrumbs
  :slug="slug"
  :data="breadcrumbsList"
>
  -
</VBreadcrumbs>

this will result in

• Home -
• UiKit -
• Breadcrumb -

Example with -> as Separator:

<VBreadcrumbs
    :slug="slug"
    :data="breadcrumbsList"
>
    ->
</VBreadcrumbs>

• Home ->
• UiKit ->
• Breadcrumb ->

Complete Example

Here’s a complete example including a dynamic breadcrumb setup:

<script setup lang="ts">
import VBreadcrumbs from 'UiKit/components/VBreadcrumbs/VBreadcrumbs.vue';

const currentSlug = 'breadcrumb';
const breadcrumbsList = [
  { link: '/', name: 'Home' },
  { link: '/ui-kit', name: 'UiKit' },
  { name: 'Breadcrumb' }
];
</script>

<template>
  <VBreadcrumbs
      :slug="currentSlug"
      :data="breadcrumbsList"
  >
      -
  </VBreadcrumbs>
</template>

Examples

• Home -
• UiKit -
• Breadcrumb -

Separator ->

• Home ->
• UiKit ->
• Breadcrumb ->