Breadcrumb

Navigation indicating the current location within a hierarchy, rendered from composed children or a data-driven items array.

Data-driven usage

Pass an items array to render breadcrumbs from data. The last item is automatically marked active.

import { Breadcrumb } from '@chassis-ui/react'

export const Example = () => {
  return (
    <Breadcrumb
      items={[{ label: 'Home', href: '#' }, { label: 'Library', href: '#' }, { label: 'Data' }]}
    />
  )
}

Manual markup

<Breadcrumb> links back to each previous page in a navigation hierarchy and shows the current location within it. Compose it from <BreadcrumbItem> children instead of items for full control over each item's markup. Separators are added automatically via CSS.

import { Breadcrumb, BreadcrumbItem } from '@chassis-ui/react'

export const Example = () => {
  return (
    <>
      <Breadcrumb>
        <BreadcrumbItem active>Home</BreadcrumbItem>
      </Breadcrumb>

      <Breadcrumb>
        <BreadcrumbItem href="#">Home</BreadcrumbItem>
        <BreadcrumbItem active>Library</BreadcrumbItem>
      </Breadcrumb>

      <Breadcrumb>
        <BreadcrumbItem href="#">Home</BreadcrumbItem>
        <BreadcrumbItem href="#">Library</BreadcrumbItem>
        <BreadcrumbItem active>Data</BreadcrumbItem>
      </Breadcrumb>
    </>
  )
}

Dividers

Dividers are added automatically in CSS through ::before and content. Change them by setting the local --cui-breadcrumb-divider CSS custom property, or through the $breadcrumb-divider Sass variable — and $breadcrumb-divider-flipped for its RTL counterpart. The Sass variable is set as a fallback to the custom property by default, producing a global divider that can be overridden without recompiling CSS at any time.

import { Breadcrumb, BreadcrumbItem } from '@chassis-ui/react'

export const Example = () => {
  return (
    <Breadcrumb style={{ '--cui-breadcrumb-divider': "'>'" } as React.CSSProperties}>
      <BreadcrumbItem href="#">Home</BreadcrumbItem>
      <BreadcrumbItem active>Library</BreadcrumbItem>
    </Breadcrumb>
  )
}

Modifying the divider via Sass requires the quote function to generate the quotes around a string. For example, to use > as the divider:

$breadcrumb-divider: quote(">");

An embedded SVG icon also works as a divider, applied via the CSS custom property or the Sass variable.

import { Breadcrumb, BreadcrumbItem } from '@chassis-ui/react'

export const Example = () => {
  return (
    <Breadcrumb
      style={
        {
          '--cui-breadcrumb-divider':
            "url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Cpath d='M2.5 0L1 1.5 3.5 4 1 6.5 2.5 8l4-4-4-4z' fill='currentColor'/%3E%3C/svg%3E\");"
        } as React.CSSProperties
      }
    >
      <BreadcrumbItem href="#">Home</BreadcrumbItem>
      <BreadcrumbItem active>Library</BreadcrumbItem>
    </Breadcrumb>
  )
}

$breadcrumb-divider: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'
width='8' height='8'%3E%3Cpath d='M2.5 0L1 1.5 3.5 4 1 6.5 2.5 8l4-4-4-4z' fill='currentColor'/%3E%3C/svg%3E");

Removing the divider entirely takes setting --cui-breadcrumb-divider: ''; (an empty string still counts as a value for a CSS custom property), or setting the Sass variable to $breadcrumb-divider: none;.

import { Breadcrumb, BreadcrumbItem } from '@chassis-ui/react'

export const Example = () => {
  return (
    <Breadcrumb style={{ '--cui-breadcrumb-divider': "'';" } as React.CSSProperties}>
      <BreadcrumbItem href="#">Home</BreadcrumbItem>
      <BreadcrumbItem active>Library</BreadcrumbItem>
    </Breadcrumb>
  )
}

$breadcrumb-divider: none;

Accessibility

Since breadcrumbs provide navigation, an aria-label="breadcrumb" on the <nav> element explains the type of navigation implemented, and aria-current="page" on the last item marks it as the current page. <Breadcrumb> sets both of these automatically.

See the WAI-ARIA Authoring Practices for the breadcrumb pattern for more detail.

API

Prop	Type	Default
`aria-label?`	`string`	`breadcrumb`
Accessible name of the wrapping `<nav>` landmark. Defaults to the English `'breadcrumb'`; override it to translate the landmark, or to tell two breadcrumb trails on the same page apart (landmarks of the same role need distinct names to be distinguishable in a screen reader's landmark list).
`className?`	`string`	—
A string of all className you want applied to the component.
`items?`	`BreadcrumbItemDef[]`	—
Array of breadcrumb items for data-driven rendering. The last item is automatically marked active. When provided, children are ignored.

BreadcrumbItemDef

Shape of each entry in Breadcrumb's items array (data-driven rendering).

Prop	Type	Default
`href?`	`string`	—
URL for the breadcrumb link. The last item in the array is always rendered as active (no link needed).
`label`	`ReactNode`	—
Label for the breadcrumb item.

BreadcrumbItem

Prop	Type	Default
`active?`	`boolean`	—
Toggle the active state for the component.
`className?`	`string`	—
A string of all className you want applied to the base component.
`href?`	`string`	—
The `href` attribute for the inner `<Link>` component.