Breadcrumb.

A trail back to where you started.

In practice

Compose links separated by decorative separators. Mark the current page with aria-current=page.

Installation

Install Coal once. Components and TypeScript declarations are included. React 19 and React DOM 19 are peer dependencies.

npm install http://localhost:3100/downloads/chlohal-coal-ui-0.5.0.tgz

This installs the local package. It is not yet published on npm. See installation for stylesheet setup and integration.

Usage

"use client";
import * as React from "react";
import "@chlohal/coal-ui/styles.css";
import { Breadcrumb } from "@chlohal/coal-ui";
export default function Example() {
    return (<Breadcrumb>
          <a href="/">
            Home
          </a>
          <span aria-hidden="true">/</span>
          <a href="/docs/installation">
            Docs
          </a>
          <span aria-hidden="true">/</span>
          <span aria-current="page">
            Components
          </span>
        </Breadcrumb>);
}

Source

The original Coal implementation. Use the package export to integrate it.

import * as React from "react";
import { cn } from "./internal.js";
export type BreadcrumbProps = React.ComponentPropsWithRef<"nav">;
export function Breadcrumb({ className, ...props }: BreadcrumbProps) {
  return (
    <nav
      aria-label="Breadcrumb"
      className={cn("coal-breadcrumb", className)}
      {...props}
    />
  );
}

Accessibility checklist

• Provide an accessible name for controls, including icon-only buttons.
• Check keyboard navigation, visible focus and disabled states in your application.
• Do not rely on color alone to communicate status.