Breadcrumbs

Where the current page sits in a hierarchy.

import { ... } from '@corndev/ui'

HTML

<nav aria-label="Breadcrumb">
  <ol class="corn-breadcrumbs">
    <li class="corn-breadcrumbs-item"><a class="corn-breadcrumbs-link" href="/">Projects</a></li>
    <li class="corn-breadcrumbs-item"><a class="corn-breadcrumbs-link" href="/petstore">Petstore</a></li>
    <li class="corn-breadcrumbs-item"><span class="corn-breadcrumbs-current" aria-current="page">GET /pets</span></li>
  </ol>
</nav>

Classes

Class
`.corn-breadcrumbs`
`.corn-breadcrumbs-item`
`.corn-breadcrumbs-link`
`.corn-breadcrumbs-ellipsis`
`.corn-breadcrumbs-current`

Vanilla JS

Required for behaviour — adds builds the trail from data and makes the collapsed middle (maxItems) expand on click.

import { createBreadcrumbs } from '@corndev/ui';
import '@corndev/ui/theme';

const el = document.querySelector('#target');
const instance = createBreadcrumbs(el, { /* options */ });

Options

Option	Type	Default	Description
`items`	`BreadcrumbItem[]`	`required`	The path, the current page last. Every crumb but the last is a link when it has an `href`; the last is always the current page, marked `aria-current="page"`.
`maxItems`	`number`	`undefined`	Show at most this many crumbs. The middle ones collapse behind a ”…” button that shows them; the first crumb and the current page always stay.
`separator`	`string`	`undefined`	Drawn between crumbs, `/` by default. Hidden from assistive technology.
`label`	`string`	`'Breadcrumb'`	The navigation landmark’s name.

React

Breadcrumbs — from @corndev/ui-react.

The props are the same as the options above, plus className.

React usage

<Breadcrumbs
  items={[
    { label: 'Projects', href: '/projects' },
    { label: 'Petstore', href: '/projects/petstore' },
    { label: 'GET /pets' },
  ]}
/>

The last item is the current page: it is not a link, and it is marked aria-current="page".

Long paths

maxItems collapses the middle behind a ”…” button that reveals it. The first crumb and the current page always stay — the first says where the path is rooted, and the last is where you are.

<Breadcrumbs items={path} maxItems={3} />

Separator

/ by default, and never read aloud. Change it with separator="›", or with --corn-breadcrumbs-separator: '›' in CSS.