uivBreadcrumbs
Indicate the current page's location within a navigational hierarchy.
Example
Use items array to create a breadcrumbs nav. active state of last element is automatically set if it is undefined.
vue
<template>
<Breadcrumbs :items="items" />
</template>
<script setup>
import { ref } from 'vue';
import { Breadcrumbs } from 'uiv';
const items = ref([
{ text: 'Home', href: '#' },
{ text: 'Library', href: '#' },
{ text: 'Data', href: '#' },
]);
</script>Breadcrumb item
You can also use <breadcrumb-item> in breadcrumbs directly. This is useful while full control of item text is need (e.g. HTML tags).
TIP
The active state will not be automatically set if using this mode.
vue
<template>
<Breadcrumbs>
<BreadcrumbItem href="#"><b>Home</b></BreadcrumbItem>
<BreadcrumbItem href="#">Library</BreadcrumbItem>
<BreadcrumbItem active>Data</BreadcrumbItem>
</Breadcrumbs>
</template>
<script setup>
import { Breadcrumbs, BreadcrumbItem } from 'uiv';
</script>Router link
Parse to (String or Object) instead of href will create a router-link for the breadcrumb item, which you can use with Vue-Router.
vue
<template>
<Breadcrumbs :items="items" />
</template>
<script setup>
import { ref } from 'vue';
import { Breadcrumbs } from 'uiv';
const items = ref([
{ text: 'Home', to: '/', exact: true },
{ text: 'Breadcrumbs', to: '/breadcrumbs' },
]);
</script>API Reference
Breadcrumbs
Props
| Name | Type | Default | Required | Description |
|---|---|---|---|---|
items | Array | Breadcrumb items to create. Props defined in each item object is the same with BreadcrumbItem.vue, except text will be replace as the breadcrumb item body. |
Slots
| Name | Description |
|---|---|
default | The breadcrumbs body. |
BreadcrumbItem
Props
| Name | Type | Default | Required | Description |
|---|---|---|---|---|
active | Boolean | false | Set item to active state. | |
href | String | An native link will be created if this prop present. | ||
target | String | Native link prop. | ||
to | String or Object | An Vue-Router link will be created if this prop present. | ||
replace | Boolean | false | Vue-Router link prop. | |
append | Boolean | false | Vue-Router link prop. | |
exact | Boolean | false | Vue-Router link prop. |
Slots
| Name | Description |
|---|---|
default | The breadcrumb item body. |