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>
  <div class="uiv">
    <Breadcrumbs :items="items" />
  </div>
</template>
<script setup>
import { ref } from 'vue';
import { Breadcrumbs } from 'uiv';

const items = ref([
  { text: 'Home', href: '#' },
  { text: 'Library', href: '#' },
  { text: 'Data', href: '#' },
]);
</script>

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>
  <div class="uiv">
    <Breadcrumbs>
      <BreadcrumbItem href="#"><b>Home</b></BreadcrumbItem>
      <BreadcrumbItem href="#">Library</BreadcrumbItem>
      <BreadcrumbItem active>Data</BreadcrumbItem>
    </Breadcrumbs>
  </div>
</template>

<script setup>
import { Breadcrumbs, BreadcrumbItem } from 'uiv';
</script>

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>
  <div class="uiv">
    <Breadcrumbs :items="items" />
  </div>
</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

Props

NameTypeDefaultRequiredDescription
itemsArrayBreadcrumb 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

NameDescription
defaultThe breadcrumbs body.

Props

NameTypeDefaultRequiredDescription
activeBooleanfalseSet item to active state.
hrefStringAn native link will be created if this prop present.
targetStringNative link prop.
toString or ObjectAn Vue-Router link will be created if this prop present.
replaceBooleanfalseVue-Router link prop.
appendBooleanfalseVue-Router link prop.
exactBooleanfalseVue-Router link prop.

Slots

NameDescription
defaultThe breadcrumb item body.