Components/Navigation
Breadcrumbs
Breadcrumbs show where a page sits in the site and let people jump back to any parent in one click
Playground
Pick a variant, then click a parent crumb to go back up the trail
Separators
Arrow is the default. Double Arrow and Slash suit dense headers, Dot suits short trails in cards and panels. Keep one separator across a product
Styles
Plain items sit in page headers. Rounded items wrap each crumb in a 28 px pill, for toolbars and places where the trail needs to read as buttons
States
Parents are Default and darken on hover. The last item is Active, it marks the current page and can open a Dropdown of sibling pages
When to use
Use when
- The site has three or more levels and people land deep from search or links
- People need to move up to a parent page or category quickly
- The page title alone doesn’t say where the page belongs
Avoid when
- The product is flat, with one or two levels, the main navigation is enough
- The steps happen in order, like a checkout, use a Stepper
- People switch between views of the same page, use a Tab Menu
Do and don’t
Start at the top level and end with the current page, so the trail reads like a path
Don’t show a trail of one item, or repeat the page title twice