<BaseBreadcrumb /> · A navigation that helps users find their place within a website or web application.
<template>
<BaseBreadcrumb :items="breadcrumb" />
</template>
<script setup lang="ts">
const breadcrumb = [
{
label: 'Home',
to: '#',
},
{
label: 'Products',
to: '#',
},
{
label: 'Laptops',
to: '#',
},
]
</script>
This component accepts an array of items as a prop. You can customize the separator between items by using the default slot.
<template>
<BaseBreadcrumb>
<!-- Separator goes here -->
</BaseBreadcrumb>
</template>
This component has props that you can use to modify its visual style.
| Prop | Type |
|---|---|
itemsdefault: [] | { to?: string | RouteLocationAsRelativeGeneric | RouteLocationAsPathGeneric; label?: string; hideLabel?: boolean; icon?: string; iconClasses?: string | ... 1 more ...; }[]The items to display in the breadcrumb. If not provided, the breadcrumb will be generated from the current route using page meta under `breadcrumb` key. |
variantdefault: "primary" | "primary" | "dark"Defines the hover color of the breadcrumb links |
| Slot | Type |
|---|---|
#default | any |
#link | { item: any; index: number; } |
#label | { item: any; index: number; } |
Use the variant prop to change the hover color of the breadcrumb links.
<template>
<BaseBreadcrumb :items="breadcrumb" variant="dark" />
</template>
<script setup lang="ts">
const breadcrumb = [
{
label: 'Home',
hideLabel: false,
to: '#',
},
{
label: 'Products',
hideLabel: false,
to: '#',
},
{
label: 'Laptops',
hideLabel: false,
to: '#',
},
]
</script>
Use the #default slot to insert a breadcrumb item separator.
<template>
<BaseBreadcrumb :items="breadcrumb">
<Icon name="lucide:arrow-right" class="block h-3 w-3" />
</BaseBreadcrumb>
</template>
<script setup lang="ts">
const breadcrumb = [
{
label: 'Home',
hideLabel: true,
to: '#',
},
{
label: 'Products',
to: '#',
},
{
label: 'Laptops',
to: '#',
},
]
</script>