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.
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:
<VBreadcrumbs
:slug="slug"
:data="breadcrumbsList"
>
-
</VBreadcrumbs>
this will result in
Example with ->
as Separator:
<VBreadcrumbs
:slug="slug"
:data="breadcrumbsList"
>
->
</VBreadcrumbs>
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>