Breadcrumbs

Storybook Source

Navigation trail that shows the current page location.

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

Inverted

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

Accessibility

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

Item
Applies to
Description

Vue API 

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

Slots

Name
Type
default

default slot for breadcrumbs content

Props

Name
Default
Type
ariaLabel
''
string

Descriptive label for the navigation content.

breadcrumbs
[]
array

A provided list of breadcrumbs. Overridden by default slot

listClass
''
string|array|object

Additional CSS class(es) applied to the list wrapper element.

inverted Deprecated
 false
"true" | "false"

Use v-dt-mode instead. Passed through to link. If true, applies inverted styles to the link.

Classes

Class
Applies to
Description

Breadcrumbs documentation last updated Friday, September 4, 2026

fix/popover-modal-zindex-scope