navigation
Breadcrumb
The path from the home page to the current page, as links.
CSS onlyPlain classes; no JavaScript in any stack.
Usage
An ordered list in a <nav>. The last link is the current page, marked with aria-current="page".
Examples
Guidance and accessibility
When to use
- Use a breadcrumb on pages deep in a hierarchy, so people see where they are and can go up a level.
- It complements the main navigation; it does not replace it.
Accessibility
- Give the
<nav>anaria-labelsuch as “Breadcrumb”, so it is found in the list of landmarks and not confused with the main navigation. - Mark the current page with
aria-current="page". - The chevrons are drawn by CSS, so screen readers do not read them, and they point the other way in right-to-left layouts.
Classes
Generated from the component contract. Parts use __, modifiers use --.
| Class | Kind | Use it for |
|---|---|---|
ca-breadcrumb | Component | The <nav> around the path. |
ca-breadcrumb__list | Part | The <ol>; it wraps on narrow screens. |
ca-breadcrumb__item | Part | One step; a chevron separates it from the previous one. |
ca-breadcrumb__link | Part | The link of one step. |
Skins
The same markup, dressed by each skin. Structure and behavior stay the same; only the look changes.
Base skin
Neutral grayscale starting point; product skins extend it and change what differs.
Calaca skin
The Calaca UI brand: hueso paper and tinta ink, cempasúchil marigold, rosa and jade.
Proof skin
Pilot skin pushed far from base: square, heavy, offset shadows, larger targets.
Crossview skin
The CrossView proofing table: cool ground, bond-paper sheets, rule-grey hairlines, one red mark.
Framework notes
Link the prebuilt stylesheet of your skin next to your brand theme. No build step.
<link rel="stylesheet" href="theme.css" />
<link rel="stylesheet" href="ca-base.css" />In Astro, Vite and other Tailwind projects, import Calaca after Tailwind and your theme in your main stylesheet.
@import "tailwindcss";
@import "./theme.css";
@import "@calaca/ui/core.css";
@import "@calaca/ui/skins/base.css";Same stylesheet as above; write the classes in className.
<button className="ca-button ca-button--primary ca-button--md" type="button">Save changes</button>