Breadcrumbs
Vue Bootstrap 5 Breadcrumb component
Indicate the current page’s location within a navigational hierarchy that automatically adds separators via CSS.
Basic example
<template>
<nav aria-label="breadcrumb">
<MDBBreadcrumb>
<MDBBreadcrumbItem active>Home</MDBBreadcrumbItem>
</MDBBreadcrumb>
</nav>
<nav aria-label="breadcrumb">
<MDBBreadcrumb>
<MDBBreadcrumbItem><a href="#">Home</a></MDBBreadcrumbItem>
<MDBBreadcrumbItem active>
Library
</MDBBreadcrumbItem>
</MDBBreadcrumb>
</nav>
<nav aria-label="breadcrumb">
<MDBBreadcrumb>
<MDBBreadcrumbItem><a href="#">Home</a></MDBBreadcrumbItem>
<MDBBreadcrumbItem><a href="#">Library</a></MDBBreadcrumbItem>
<MDBBreadcrumbItem active>Data</MDBBreadcrumbItem>
</MDBBreadcrumb>
</nav>
</template>
<script>
import { MDBBreadcrumb, MDBBreadcrumbItem } from 'mdb-vue-ui-kit';
export default {
components: {
MDBBreadcrumb,
MDBBreadcrumbItem
},
};
</script>
<script setup lang="ts">
import { MDBBreadcrumb, MDBBreadcrumbItem } from 'mdb-vue-ui-kit';
</script>
Changing the separator
Separators are automatically added in CSS through
::before
and
content>. They can be changed by changing $breadcrumb-divider, or through the
$breadcrumb-divider Sass variable — and
$breadcrumb-divider-flipped for its RTL counterpart, if needed. We default to our
Sass varibale, 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.
<template>
<MDBNavbar expand="lg" light bg="light" container>
<nav aria-label="breadcrumb" style="--mdb-breadcrumb-divider: '>'">
<MDBBreadcrumb>
<MDBBreadcrumbItem><a href="#">Home</a></MDBBreadcrumbItem>
<MDBBreadcrumbItem active> Library </MDBBreadcrumbItem>
</MDBBreadcrumb>
</nav>
</MDBNavbar>
</template>
<script>
import { MDBNavbar, MDBBreadcrumb, MDBBreadcrumbItem } from 'mdb-vue-ui-kit';
export default {
components: {
MDBNavbar,
MDBBreadcrumb,
MDBBreadcrumbItem,
},
};
</script>
<script setup lang="ts">
import { MDBNavbar, MDBBreadcrumb, MDBBreadcrumbItem } from 'mdb-vue-ui-kit';
</script>
When modifying via Sass, the
quote
function is needed to generate the quotes around a string, so if you want
> as separator, you can use this:
$breadcrumb-divider: quote(">");
It’s also possible to use an embedded SVG icon:
<template>
<MDBNavbar expand="lg" light bg="light" container>
<nav
aria-label="breadcrumb"
style="--mdb-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");"
>
<MDBBreadcrumb>
<MDBBreadcrumbItem><a href="#">Home</a></MDBBreadcrumbItem>
<MDBBreadcrumbItem active>
Library
</MDBBreadcrumbItem>
</MDBBreadcrumb>
</nav>
</MDBNavbar>
</template>
<script>
import { MDBNavbar, MDBBreadcrumb, MDBBreadcrumbItem } from 'mdb-vue-ui-kit';
export default {
components: {
MDBNavbar,
MDBBreadcrumb,
MDBBreadcrumbItem
},
};
</script>
<script setup lang="ts">
import { MDBNavbar, MDBBreadcrumb, MDBBreadcrumbItem } from 'mdb-vue-ui-kit';
</script>
The separator can be removed by setting
--mdb-breadcrumb-divider: ''; (empty strings in CSS custom properties counts as a
value), or setting the Sass variable to $breadcrumb-divider to none:
<template>
<MDBNavbar expand="lg" light bg="light" container>
<nav aria-label="breadcrumb" style="--mdb-breadcrumb-divider: ''">
<MDBBreadcrumb>
<MDBBreadcrumbItem><a href="#">Home</a></MDBBreadcrumbItem>
<MDBBreadcrumbItem active>
Library
</MDBBreadcrumbItem>
</MDBBreadcrumb>
</nav>
</MDBNavbar>
</template>
<script>
import { MDBNavbar, MDBBreadcrumb, MDBBreadcrumbItem } from 'mdb-vue-ui-kit';
export default {
components: {
MDBNavbar,
MDBBreadcrumb,
MDBBreadcrumbItem
},
};
</script>
<script setup lang="ts">
import { MDBNavbar, MDBBreadcrumb, MDBBreadcrumbItem } from 'mdb-vue-ui-kit';
</script>
$breadcrumb-divider: none;
Accessibility
Since breadcrumbs provide a navigation, it’s a good idea to add a meaningful label such as
aria-label="breadcrumb" to describe the type of navigation provided in the
<nav> element, as well as applying an aria-current="page" to
the last item of the set to indicate that it represents the current page.
For more information, see the WAI-ARIA Authoring Practices for the breadcrumb pattern.
Breadcrumbs - API
Import
<script>
import {
MDBBreadcrumb,
MDBBreadcrumbItem
} from 'mdb-vue-ui-kit';
</script>
Properties
CSS variables
As part of MDB’s evolving CSS variables approach, breadcrumb now uses local CSS variables on
.breadcrumb for enhanced real-time customization. Values for the CSS variables
are set via Sass, so Sass customization is still supported, too.
// .breadcrumb
--#{$prefix}breadcrumb-padding-x: #{$breadcrumb-padding-x};
--#{$prefix}breadcrumb-padding-y: #{$breadcrumb-padding-y};
--#{$prefix}breadcrumb-margin-bottom: #{$breadcrumb-margin-bottom};
@include rfs($breadcrumb-font-size, --#{$prefix}breadcrumb-font-size);
--#{$prefix}breadcrumb-bg: #{$breadcrumb-bg};
--#{$prefix}breadcrumb-border-radius: #{$breadcrumb-border-radius};
--#{$prefix}breadcrumb-divider-color: #{$breadcrumb-divider-color};
--#{$prefix}breadcrumb-item-padding-x: #{$breadcrumb-item-padding-x};
--#{$prefix}breadcrumb-item-active-color: #{$breadcrumb-active-color};
// .navbar
//.breadcrumb
--#{$prefix}breadcrumb-item-color: #{$breadcrumb-item-color};
--#{$prefix}breadcrumb-item-hover-color: #{$breadcrumb-item-hover-color};
--#{$prefix}breadcrumb-item-before-color: #{$breadcrumb-item-before-color};
--#{$prefix}breadcrumb-item-transition: #{$breadcrumb-item-transition};
SCSS variables
$breadcrumb-font-size: null;
$breadcrumb-padding-y: 0;
$breadcrumb-padding-x: 0;
$breadcrumb-item-padding-x: 0.5rem;
$breadcrumb-margin-bottom: 1rem;
$breadcrumb-bg: null;
$breadcrumb-divider-color: $gray-600;
$breadcrumb-active-color: $gray-600;
$breadcrumb-divider: quote('/');
$breadcrumb-divider-flipped: $breadcrumb-divider;
$breadcrumb-border-radius: null;
$breadcrumb-item-color: rgba(0, 0, 0, 0.55);
$breadcrumb-item-transition: color 0.15s ease-in-out;
$breadcrumb-item-hover-color: rgba(0, 0, 0, 0.7);
$breadcrumb-item-before-color: $breadcrumb-item-color;