web
mobile
Edit these docs Rate these docs

Vue Bootstrap Breadcrumb

Vue Breadcrumbs - Bootstrap 4 & Material Design

Vue Bootstrap breadcrumbs indicate on which exact page in the navigational hierarchy your visitors currently are.

They are highly useful in projects, that tend to have a large structure like magazines or documentations.

Examples of Bootstrap breadcrumb use:

  • Documentation page
  • Magazine
  • ERP system

See the following breadcrumbs examples:


Basic breadcrumbs


        <template>
          <div>
            <mdb-breadcrumb>
              <mdb-breadcrumb-item active>Home</mdb-breadcrumb-item>
            </mdb-breadcrumb>
            <mdb-breadcrumb>
              <mdb-breadcrumb-item><a href="#">Home</a></mdb-breadcrumb-item>
              <mdb-breadcrumb-item active>Library</mdb-breadcrumb-item>
            </mdb-breadcrumb>
            <mdb-breadcrumb>
              <mdb-breadcrumb-item><a href="#">Home</a></mdb-breadcrumb-item>
              <mdb-breadcrumb-item><a href="#">Library</a></mdb-breadcrumb-item>
              <mdb-breadcrumb-item active>Data</mdb-breadcrumb-item>
            </mdb-breadcrumb>
          </div>
        </template>
      

        <script>
          import { mdbBreadcrumb, mdbBreadcrumbItem } from 'mdbvue';
          export default {
            name: 'Breadcrumb',
            components: {
              mdbBreadcrumb,
              mdbBreadcrumbItem
            }
          }
        </script>