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:

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

Place the component in your template like this:

vue
<VBreadcrumbs
    :slug="slug"
    :data="breadcrumbsList"
/>
  • slug: A unique identifier for the current page.
  • breadcrumbsList: An array of breadcrumb items.
js
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

ts
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:

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

NOTE

Note: Use either link or routeTo based on your navigation strategy.

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:

vue

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

this will result in

Example with -> as Separator:

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

Complete Example

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

vue
<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

Separator ->
Help Ukraine to stop russian aggression