Breadcrumb — Caustica Design Docs

Preview

Live

<nav class="breadcrumb" aria-label="Breadcrumb">
  <ol class="breadcrumb__list">
    <li class="breadcrumb__item">
      <a class="ui-link breadcrumb__link" href="../index.html">Brand</a>
      <span class="breadcrumb__sep" aria-hidden="true">/</span>
    </li>
    <li class="breadcrumb__item">
      <a class="ui-link breadcrumb__link" href="/panels">Panels</a>
      <span class="breadcrumb__sep" aria-hidden="true">/</span>
    </li>
    <li class="breadcrumb__item">
      <span class="breadcrumb__page" aria-current="page">Avatar</span>
    </li>
  </ol>
</nav>

import {
  Breadcrumb, BreadcrumbList, BreadcrumbItem,
  BreadcrumbLink, BreadcrumbPage, BreadcrumbSeparator,
} from 'caustica-design/core'
import 'caustica-design/css'

<Breadcrumb aria-label="Breadcrumb">
  <BreadcrumbList>
    <BreadcrumbItem>
      <BreadcrumbLink href="../index.html">Brand</BreadcrumbLink>
      <BreadcrumbSeparator />
    </BreadcrumbItem>
    <BreadcrumbItem>
      <BreadcrumbLink href="/panels">Panels</BreadcrumbLink>
      <BreadcrumbSeparator />
    </BreadcrumbItem>
    <BreadcrumbItem>
      <BreadcrumbPage>Avatar</BreadcrumbPage>
    </BreadcrumbItem>
  </BreadcrumbList>
</Breadcrumb>

Variants

Link item

.breadcrumb__link + .ui-link for ancestors.

Brand

Current page

.breadcrumb__page with aria-current="page" — not a link.

Avatar

Separator

.breadcrumb__sep defaults to /; decorative aria-hidden.

Home Docs

Custom separator

React BreadcrumbSeparator children override the default slash.

Home Docs

API

HTML classes

Class	Description
`.breadcrumb`	Nav landmark root.
`.breadcrumb__list`	Ordered list of crumbs.
`.breadcrumb__item`	List item wrapping link / page / sep.
`.breadcrumb__link`	Ancestor link (pair with `.ui-link`).
`.breadcrumb__page`	Current page text.
`.breadcrumb__sep`	Decorative separator.

React props

From src/core/Breadcrumb.tsx — compound Breadcrumb* components.

Prop	Type	Default	Description
`aria-label`	`string`	—	Required on `Breadcrumb` nav.
`children`	`ReactNode`	—	List / items / separators.
`href` (Link)	`string`	—	Passed through on `BreadcrumbLink`.
`BreadcrumbPage`	—	—	Sets `aria-current="page"` automatically.
`BreadcrumbSeparator children`	`ReactNode`	`'/'`	Custom separator glyph.
`className`	`string`	—	Merged on each compound root.