uiv

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

  1. Home
  2. Library
  3. Data
<template>
  <div class="uiv">
    <breadcrumbs :items="items" />
  </div>
</template>
<script>
export default {
  data() {
    return {
      items: [
        { 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.

  1. Home
  2. Library
  3. Data
<template>
  <div class="uiv">
    <breadcrumbs>
      <breadcrumb-item href="#"><b>Home</b></breadcrumb-item>
      <breadcrumb-item href="#">Library</breadcrumb-item>
      <breadcrumb-item active>Data</breadcrumb-item>
    </breadcrumbs>
  </div>
</template>

Parse to (String or Object) instead of href will create a router-link for the breadcrumb item, which you can use with Vue-Router (opens new window).

  1. Home
  2. Breadcrumbs
<template>
  <div class="uiv">
    <breadcrumbs :items="items" />
  </div>
</template>
<script>
export default {
  data() {
    return {
      items: [
        { text: 'Home', to: '/', exact: true },
        { text: 'Breadcrumbs', to: '/breadcrumbs' },
      ],
    }
  },
}
</script>

# API Reference

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

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

← Pagination →