Breadcrumbs
Anatomy
- Items
- Current
Usage Guidelines
- Breadcrumb navigation is only displayed for desktop users, not mobile.
- Breadcrumb navigation displays the direct hierarchical page-by-page navigation path from the homepage to the user's current page.
- Home is not included in the breadcrumbs.
- The parent pages are shown in an inactive color.
- Parent pages within the breadcrumb are clickable.
- The current page in the breadcrumbs is not clickable.
- Click-ability of higher level breadcrumbs follows the style for clickable links defined by the theme design.
- The current page is shown in the breadcrumbs in the 'highlight' text style.
WordPress
This component is included automatically in most page templates.
Specifications
Properties
| Property | Type | Description | Required | Default |
|---|---|---|---|---|
| breadcrumbs | array | List of links to appear in the breadcrumb list | Yes | - |
| └ item | object | - | - | - |
| └ url | string | - | Yes | - |
| └ title | string | Display text | Yes | - |
| └ current | boolean | indication for which page we're on right now, usually the last one in the list | No | - |
| show_on_mobile | boolean | Whether to show breadcrumbs on small viewports | No | false |
Styling
Colors
| Name | Application | Custom Property | Roles | Default Opacity | Description |
|---|---|---|---|---|---|
| current-color | text | --tux-comp-breadcrumb--current-color | on-background | - | - |
Custom Properties
| Name | Default | Resets | Description |
|---|---|---|---|
--tux-comp-breadcrumb--current-color | var(--tux-theme--link-color) | Yes | - |
Changelog
1.0.0
- breadcrumb added
Related
Contained In
Other components that use this component (not including freeform content slots).
Examples
Default
{{ include( 'components/breadcrumb.twig', {
breadcrumbs: {...}
} ) }}