Breadcrumbs ​

The breadcrumb component provides a set of classes to show where a page sits in a site's hierarchy.

Breadcrumbs implement the spec found in the ARIA Authoring Practices Guide.

Base classes ​

Use .breadcrumb on an ordered list inside a labelled navigation landmark. Add .breadcrumb-item to each list item and .breadcrumb-link to each link. Add aria-current="page" to the current page link, or optionally to its list item if the current page is plain text.

Collapsible breadcrumbs ​

Graupl provides a feature for breadcrumbs that is not part of the ARIA Authoring Practices Guide, collapsible breadcrumbs. This allows breadcrumb trails to take up less space on smaller screens.

Put a .breadcrumb-toggle button in its own .breadcrumb-item before the items you want to collapse. Give the button an accessible name. When the trail is collapsed, the items after the button are hidden except for the last item. Once expanded, the full trail is visible and the button is hidden.

Initialization ​

A basic breadcrumb trail works without JavaScript. To enable the collapsible trail, run the breadcrumb generator after the markup is in the DOM.

import generateBreadcrumbs from "@graupl/core/breadcrumb/generator";

generateBreadcrumbs();

The generator finds the toggle inside .breadcrumb. Initialization sets the button's aria-controls to the trail's ID and updates aria-expanded as the trail expands or collapses.

Breadcrumb items show and hide immediately by default. To enable item fades, pass transitionClass: "transitioning" in the generator’s options object. The fade uses transitionDuration.

Variants ​

By default, no theme variants are generated.

If you are compiling your own version of Graupl, you can set the breadcrumb module’s $themeable variable to true to generate the .primary, .secondary, and .tertiary variants. Add a variant class alongside .breadcrumb or to an element inside it.

Custom Properties ​

The following custom properties can be used to customize the breadcrumb component:

Sass variables ​

The following Sass variables can be used to customize the generation of the breadcrumb component: