A breadcrumb bar shows where the page sits in the site and lets the user go back up in one click. Two to six crumbs, separated by a slash.
How to add a breadcrumb bar to a page. The file is components/css/breadcrumb.css.
Link the shared stylesheet once per page. Never copy the rules into a page.
| Step | What to do |
|---|---|
| 1. Link | <link rel="stylesheet" href="/components/css/breadcrumb.css">. Both templates already have it. |
| 2. Place it | First in .page, directly under the header, before the title block or the first section. |
| 3. Crumbs | A link for every parent level, a breadcrumb-sep between each, and the current page as the last item. |
| 4. Next block | The block after the bar has its top padding zeroed by the shared file. Do not add your own. |
Copy the markup you need.
| Class | Use |
|---|---|
breadcrumb | The nav: side padding and the extra bottom padding. |
breadcrumb__bar | The row: flex, wrap, 8px gap, 16px padding above and below. |
breadcrumb-item | A crumb. See Breadcrumb Base. |
breadcrumb-item--active | The current page. |
breadcrumb-sep | The “/” between two crumbs. |
--px-page from the page (16, 32 and 40px per breakpoint). Both templates define it.var(--px-page) for the side padding, never var(--px-full).The component is one CSS file, shared by every page. Link it, never copy it. The CSS below is read from the file the page links, so it is always what you see.