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>

Breadcrumb in navbar

Very often breadcrumb is placed in the navbar. 

<template>
  <MDBNavbar expand="lg" light bg="light" container>
    <nav aria-label="breadcrumb">
      <MDBBreadcrumb>
        <MDBBreadcrumbItem><a href="#">Home</a></MDBBreadcrumbItem>
        <MDBBreadcrumbItem><a href="#">Library</a></MDBBreadcrumbItem>
        <MDBBreadcrumbItem active>
          <a href="#">Data</a>
        </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 in header

If there is not enough space in navbar, consider placing breadcrumbs in a composition like this below.

Dashboard

<template>
  <MDBNavbar expand="lg" light bg="light" container>
    <MDBRow class="g-3 ms-3 align-items-center">
      <MDBInput
        id="navbarSupportedContent"
        wrapperClass="col-auto"
        label='Search (ctrl + "/" to focus)'
      />
      <MDBCol auto>
        <a class="ms-3" href="#!" role="button" style="color: #616161">
          <MDBIcon icon="search"></MDBIcon>
        </a>
      </MDBCol>
    </MDBRow>
    <MDBRow align-items-start bg-light mb-3>
      <MDBCol>
        <MDBIcon icon="bell" />
        <MDBBadge notification color="danger" pill>1</MDBBadge>
      </MDBCol>
      <MDBCol class="ps-1 pe-1">
        <MDBIcon class="flag flag-united-kingdom" />
      </MDBCol>
      <MDBCol class="ps-1 pe-1">
        <img
          src="https://mdbootstrap.com/img/Photos/Avatars/img (31).jpg"
          class="rounded-circle"
          height="22"
          alt=""
          loading="lazy"
        />
      </MDBCol>
    </MDBRow>
  </MDBNavbar>
  <MDBContainer class="p-5 bg-light mb-4">
    <h1>Dashboard</h1>
    <nav aria-label="breadcrumb" class="d-flex">
      <MDBBreadcrumb>
        <MDBBreadcrumbItem>
          <a class="text-reset" href="#">Home</a>
        </MDBBreadcrumbItem>
        <MDBBreadcrumbItem>
          <a class="text-reset" href="#">Library</a>
        </MDBBreadcrumbItem>
        <MDBBreadcrumbItem active>
          <a class="text-reset" href="#"><u>Dashboard</u></a>
        </MDBBreadcrumbItem>
      </MDBBreadcrumb>
    </nav>
  </MDBContainer>
</template>
<script>
  import { MDBNavbar, MDBBreadcrumb, MDBBreadcrumbItem,
    MDBContainer, MDBRow, MDBInput, MDBCol, MDBIcon, MDBBadge } from 'mdb-vue-ui-kit';

    export default {
      components: {
        MDBNavbar,
        MDBBreadcrumb,
        MDBBreadcrumbItem,
        MDBContainer,
        MDBRow,
        MDBInput,
        MDBCol,
        MDBIcon,
        MDBBadge,
      },
    };
</script>
<script setup lang="ts">
  import {
    MDBNavbar,
    MDBBreadcrumb,
    MDBBreadcrumbItem,
    MDBContainer,
    MDBRow,
    MDBInput,
    MDBCol,
    MDBIcon,
    MDBBadge,
  } 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(&#34;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&#34;);"
    >
      <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

MDBBreadcrumb

Name Type Default Description Example
tag String 'nav' Defines tag of the MDBBreadcrumb element <MDBBreadcrumb tag="section" />

MDBBreadcrumbItem

Name Type Default Description Example
tag String 'li' Defines tag of the MDBBreadcrumbItem element <MDBBreadcrumbItem tag="div" />
active Boolean false Add active class to element and aria-current="page" <MDBBreadcrumbItem active />
current String 'page' Change aria-current to element if active class is selected to true. Use ('page' | 'step' | 'location'). <MDBBreadcrumbItem active current="location" />

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;