Vue Bootstrap Breadcrumb Component

Breadcrumb with Bootstrap Styling

Bootstrap 5 components designed for Vue.js

This component is part of the CoreUI for Vue.js UI components library, which offers all Bootstrap components designed to work seamlessly with Vue.js.

If you want to use Bootstrap 5 in a Vue.js environment while also needing advanced components that Bootstrap does not offer and dedicated developer support, then this library is the best solution for you.

Learn how to use CoreUI’s Vue Breadcrumb component with Bootstrap styles for flexible, framework-consistent UI.

On this page

Example

The breadcrumb navigation provides links back to each previous page the user navigated through and shows the current location in a website or an application. You don’t have to add separators, because they automatically added in CSS through ::before and content.

vue

<template>
  <CBreadcrumb>
    <CBreadcrumbItem active>Home</CBreadcrumbItem>
  </CBreadcrumb>
  <CBreadcrumb>
    <CBreadcrumbItem href="#">Home</CBreadcrumbItem>
    <CBreadcrumbItem active>Library</CBreadcrumbItem>
  </CBreadcrumb>
  <CBreadcrumb>
    <CBreadcrumbItem href="#">Home</CBreadcrumbItem>
    <CBreadcrumbItem href="#">Library</CBreadcrumbItem>
    <CBreadcrumbItem active>Data</CBreadcrumbItem>
  </CBreadcrumb>
</template>

<script setup>
import { CBreadcrumb, CBreadcrumbItem } from '@coreui/vue'
</script>

Dividers

Dividers are automatically added in CSS through ::before and content. They can be changed by modifying a local CSS custom property --coreui-breadcrumb-divider, or through the $breadcrumb-divider Sass variable — and $breadcrumb-divider-flipped for its RTL counterpart, if needed. We default to our Sass variable, which is set as a fallback to the custom property. This way, you get a global divider that you can override without recompiling CSS at any time.

vue

<template>
  <CBreadcrumb style="--cui-breadcrumb-divider: '>'">
    <CBreadcrumbItem href="#">Home</CBreadcrumbItem>
    <CBreadcrumbItem active>Library</CBreadcrumbItem>
  </CBreadcrumb>
</template>

<script setup>
import { CBreadcrumb, CBreadcrumbItem } from '@coreui/vue'
</script>

When modifying via Sass, the quote function is required to generate the quotes around a string. For example, using > as the divider, you can use this:

$breadcrumb-divider: quote(">");

It’s also possible to use an embedded SVG icon. Apply it via our CSS custom property, or use the Sass variable.

vue

<template>
  <CBreadcrumb
    style="
      --cui-breadcrumb-divider: url(
        &#34;data:image/svg + xml,
        %3Csvgxmlns='http://www.w3.org/2000/svg'width='8'height='8'%3E%3Cpathd='M2.5 0L1 1.5 3.5 4 1 6.5 2.5 8l4-4-4-4z'fill='currentColor'/%3E%3C/svg%3E&#34;
      );
    "
  >
    <CBreadcrumbItem href="#">Home</CBreadcrumbItem>
    <CBreadcrumbItem active>Library</CBreadcrumbItem>
  </CBreadcrumb>
</template>

<script setup>
import { CBreadcrumb, CBreadcrumbItem } from '@coreui/vue'
</script>

$breadcrumb-divider: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' 
width='8' height='8'%3E%3Cpath d='M2.5 0L1 1.5 3.5 4 1 6.5 2.5 8l4-4-4-4z' fill='currentColor'/%3E%3C/svg%3E");

You can also remove the divider setting --cui-breadcrumb-divider: ''; (empty strings in CSS custom properties counts as a value), or setting the Sass variable to $breadcrumb-divider: none;.

vue

<template>
  <CBreadcrumb style="--cui-breadcrumb-divider: ''">
    <CBreadcrumbItem href="#">Home</CBreadcrumbItem>
    <CBreadcrumbItem active>Library</CBreadcrumbItem>
  </CBreadcrumb>
</template>

<script setup>
import { CBreadcrumb, CBreadcrumbItem } from '@coreui/vue'
</script>

$breadcrumb-divider: none;