Out of the box
A row with the folders of the path, separated by a character.
In this template
- The last crumb is the current page: set more heavily and not clickable. A link to the page you are standing on is a dead end.
- The separator is muted and cannot be selected — it should not end up in a copy.
- The row wraps rather than overflowing. Three folders deep, the path on a smartphone is longer than the screen.
- Every crumb has padding above and below, so that it can be hit on a touchscreen.
A deep example: Callouts — the basic form — there the whole path stands over four stations.
Not on the home page
The component is configured with
condition: not-index; on a folder home page the last crumb would be identical to the title below it.
The language folder is a crumb too
On an English page the path begins with
en— it is a folder like any other, and Quartz has no reason to treat it differently.
Which variables apply here
These 7 variables are read by the section meta-breadcrumbs in components-navigation.scss. They can be changed in QuartzControl under Styles → Variables — without a line of CSS.
| Variable | Value | also applies to |
|---|---|---|
--darkgray | #333333 · dark #DDDDDD | 18 other components |
--gray | #5F5F5F · dark #A1A1A1 | 22 other components |
--secondary | #1463A3 · dark #699DC3 | 19 other components |
--tpl-rule-control | color-mix(in srgb, var(--gray) 70%, var(-… | 11 other components |
--tpl-space-3xs | 0.125rem | 6 other components |
--tpl-text-xs | 0.78rem | 10 other components |
--tpl-underline-offset | 0.18em | 6 other components |
This table is generated: it is read out of the stylesheets rather than kept by hand.