Breadcrumb
Indicate the current page's location within a navigational hierarchy.
Contents
Example
Changing the Separator
Separators are automatically added in CSS through ::before
and content
. They can be changed by changing $breadcrumb-divider
settings variable in the SCSS. The quote function is needed to generate the quotes around a string, so if you want >
as seperator, you can use this:
It is also possible to use a base64 embedded SVG icon:
The separator can be removed by setting $breadcrumb-divider
to none
:
Accessibility
Since breadcrumbs provide a navigation, it is 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.
SASS Reference
Variables
The available Customization options, or Sass variables, that can be customized for the breadcrumb component.
Name | Type | Default | Description |
---|---|---|---|
$enable-breadcrumb |
boolean | true |
Enable the generation of the breadcrumb component classes. |
$breadcrumb-margin-bottom |
string | 1rem |
Vertical spacing for breadcrumb. |
$breadcrumb-item-padding-x |
string | .5rem |
Horizontal spacing for breadcrumb items. |
$breadcrumb-active-color |
string | $uibase-700 |
Text color for active breadcrumb items. |
$breadcrumb-divider |
string | quote("/") |
Breadcrumb divider content. |
$breadcrumb-divider-color |
string | $uibase-300 |
Text color of breadcrumb divider. |
Mixins
No mixins available.