Breadcrumbs

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.

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

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

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