Monet
@etched/monet 0.0.1

Breadcrumbs

Ported

Where the page is: a trail of links to the pages above it, then the current page. A nav named "Breadcrumb" (change it with aria-label) around an ordered list. Ancestors keep their width; the current page truncates. When the trail is narrower than 40 rem, it shows only "…", the parent and the current page.

Kumo source 
import { Breadcrumbs, BreadcrumbsCurrent, BreadcrumbsLink } from "@etched/monet/breadcrumbs";

export function Preview() {
  return (
    <Breadcrumbs>
      <BreadcrumbsLink href="#breadcrumbs">Tracer</BreadcrumbsLink>
      <BreadcrumbsLink href="#breadcrumbs">Compiler Engineer</BreadcrumbsLink>
      <BreadcrumbsCurrent>Ana Ruiz</BreadcrumbsCurrent>
    </Breadcrumbs>
  );
}

Installation

import { Breadcrumbs, BreadcrumbsCurrent, BreadcrumbsLink } from "@etched/monet/breadcrumbs";

Examples

Links and the current page

import { Breadcrumbs, BreadcrumbsCurrent, BreadcrumbsLink } from "@etched/monet/breadcrumbs";

export function LinksAndTheCurrentPage() {
  return (
    <Breadcrumbs>
      <BreadcrumbsLink href="#breadcrumbs">Tracer</BreadcrumbsLink>
      <BreadcrumbsLink href="#breadcrumbs">Compiler Engineer</BreadcrumbsLink>
      <BreadcrumbsCurrent>Ana Ruiz</BreadcrumbsCurrent>
    </Breadcrumbs>
  );
}

With icons

import { HouseIcon } from "@phosphor-icons/react";
import { Breadcrumbs, BreadcrumbsCurrent, BreadcrumbsLink } from "@etched/monet/breadcrumbs";

export function WithIcons() {
  return (
    <Breadcrumbs aria-label="Breadcrumb, with icons">
      <BreadcrumbsLink href="#breadcrumbs" icon={<HouseIcon />}>
        Home
      </BreadcrumbsLink>
      <BreadcrumbsLink href="#breadcrumbs">Runs</BreadcrumbsLink>
      <BreadcrumbsCurrent>Run 1284</BreadcrumbsCurrent>
    </Breadcrumbs>
  );
}

Small

import { Breadcrumbs, BreadcrumbsCurrent, BreadcrumbsLink } from "@etched/monet/breadcrumbs";

export function Small() {
  return (
    <Breadcrumbs size="sm" aria-label="Breadcrumb, small">
      <BreadcrumbsLink href="#breadcrumbs">Settings</BreadcrumbsLink>
      <BreadcrumbsCurrent>Data quality</BreadcrumbsCurrent>
    </Breadcrumbs>
  );
}

Loading

A placeholder line holds the current page's place until its name arrives.

import { Breadcrumbs, BreadcrumbsCurrent, BreadcrumbsLink } from "@etched/monet/breadcrumbs";

export function Loading() {
  return (
    <Breadcrumbs aria-label="Breadcrumb, loading">
      <BreadcrumbsLink href="#breadcrumbs">Tracer</BreadcrumbsLink>
      <BreadcrumbsCurrent loading />
    </Breadcrumbs>
  );
}

Narrow

Below 40 rem, the trail shows "…", the parent and the current page. Ancestors keep their width; the current page truncates.

import { Breadcrumbs, BreadcrumbsCurrent, BreadcrumbsLink } from "@etched/monet/breadcrumbs";

export function Narrow() {
  return (
    <div style={{ maxInlineSize: "20rem" }}>
      <Breadcrumbs aria-label="Breadcrumb, narrow">
        <BreadcrumbsLink href="#breadcrumbs">Tracer</BreadcrumbsLink>
        <BreadcrumbsLink href="#breadcrumbs">Compiler Engineer</BreadcrumbsLink>
        <BreadcrumbsLink href="#breadcrumbs">Pipeline</BreadcrumbsLink>
        <BreadcrumbsCurrent>Ana Ruiz, staff compiler engineer, Toronto</BreadcrumbsCurrent>
      </Breadcrumbs>
    </div>
  );
}

Accessibility

  • A navigation landmark named "Breadcrumb" (change it with aria-label) around an ordered list. The chevrons are hidden.
  • The last crumb has aria-current="page" and is not a link, so Tab skips it. While loading, it has aria-busy.
  • On a narrow trail, the hidden crumbs are hidden from screen readers too, and the "…" is not read.
  • With two trails on one page, give each its own aria-label.

API reference