Breadcrumbs

Usage #

Breadcrumbs show users where they are within a site's hierarchy. Breadcrumbs help orient the user and allow for navigation to previous page levels. It can be appropriate to use a breadcrumb when:

• The user is many levels of navigation deep
• The current page does not have its own navigation
• The user needs to quickly go back to the previous parent page

Breadcrumbs should be the first page element—placed directly above the page's title. All pages that appear in the breadcrumb should link to their respective page. The page the user is on should always be the last page listed and not linked.

When Not to Use #

Breadcrumbs are always treated as secondary and should not entirely replace the primary navigation. They shouldn't be used for products that have single level navigation because they create unnecessary clutter.

Variants and Examples #

Default #

<dt-breadcrumbs
  :breadcrumbs="[
    { href: '#', label: 'Root' },
    { href: '#', label: 'Section' },
    { href: '#', label: 'Section' },
    { href: '#', label: 'Section' },
    { href: '#', label: 'Current Page', selected: true },
  ]"
/>

Inverted #

In place of the inverted prop, use the v-dt-mode directive on the component element.

<div class="d-bgc-contrast">
  <dt-breadcrumbs
    v-dt-mode:invert
    class="d-p-200 d-bar-400"
    :breadcrumbs="[
      { href: '#', label: 'Root' },
      { href: '#', label: 'Section' },
      { href: '#', label: 'Current Page', selected: true },
    ]"
  />
</div>

Vue API #

import { DtBreadcrumbs } from '@dialpad/dialtone-vue';

Slots

Props

Classes #

Accessibility #

HTML doesn't provide dedicated semantic elements for breadcrumbs, so we need to add a few ARIA attributes to make them accessible.