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>
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>
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>
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>
$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.
If you want to support our friends from Tailwind Elements you can also check out the Tailwind breadcrumbs documentation.
Breadcrumbs - API
Import
<script>
import {
MDBBreadcrumb,
MDBBreadcrumbItem
} from 'mdb-vue-ui-kit';
</script>