Breadcrumbs

Shows the current page's position within a navigable hierarchy.

Preview

Example code

Docs
Components
Breadcrumbs

Playground

DisabledisDisabled

Disables actions for the breadcrumb collection.

Usage

tsx

import { Breadcrumb, Breadcrumbs } from "earthling-ui/breadcrumbs";

export function Example() {
  return (
    <>
      <Breadcrumbs aria-label="Breadcrumb">
        <Breadcrumb>
          <a href="/">Docs</a>
        </Breadcrumb>
        <Breadcrumb>
          <a href="/components">Components</a>
        </Breadcrumb>
        <Breadcrumb current>Breadcrumbs</Breadcrumb>
      </Breadcrumbs>
    </>
  );
}

Wrap each ancestor in a real link and leave the current page as the final item.
Use current on the final Breadcrumb when you need to set aria-current explicitly.
Breadcrumbs complement primary navigation and should not reproduce a long browsing history.

Installation

Start with the project setup for React and Tailwind CSS 4. Both paths use the same component and theme.

Import package

Own the source

bash

npm install earthling-ui

Use the component import shown above. Package updates keep the implementation current.

API reference

Declarations from the current library build, including inherited primitive props. Playground controls above show selected options; they are not the complete API.

tsx

// Generated by dts-bundle-generator v9.5.1

import { ComponentPropsWithoutRef } from 'react';
import { Breadcrumb as BreadcrumbPrimitive, Breadcrumbs as BreadcrumbsPrimitive } from 'react-aria-components';

export interface BreadcrumbsProps extends ComponentPropsWithoutRef<typeof BreadcrumbsPrimitive> {
}
export declare const Breadcrumbs: import("react").ForwardRefExoticComponent<BreadcrumbsProps & import("react").RefAttributes<HTMLOListElement>>;
export interface BreadcrumbProps extends ComponentPropsWithoutRef<typeof BreadcrumbPrimitive> {
	/** Marks this breadcrumb as the current page (sets `aria-current="page"`). */
	current?: boolean;
}
export declare const Breadcrumb: import("react").ForwardRefExoticComponent<BreadcrumbProps & import("react").RefAttributes<HTMLLIElement>>;

export {};

Runtime dependencies: cnfast, react-aria-components.

Source

Use the eject command to copy this implementation with its required helpers and project-specific imports.

View Breadcrumbs implementation

tsx

"use client";

import { cn } from "@/utils/cn";
import {
  forwardRef,
  type ComponentPropsWithoutRef,
  type ComponentRef,
} from "react";
import {
  Breadcrumbs as BreadcrumbsPrimitive,
  Breadcrumb as BreadcrumbPrimitive,
  composeRenderProps,
} from "react-aria-components";

//Breadcrumbs
export interface BreadcrumbsProps extends ComponentPropsWithoutRef<
  typeof BreadcrumbsPrimitive
> {}

const Breadcrumbs = forwardRef<
  ComponentRef<typeof BreadcrumbsPrimitive>,
  BreadcrumbsProps
>(({ className, ...props }, ref) => {
  return (
    <BreadcrumbsPrimitive
      ref={ref}
      {...props}
      className={cn(
        "m-0 flex list-none flex-wrap items-center p-0 text-sm text-muted-foreground",
        className,
      )}
    />
  );
});
Breadcrumbs.displayName = "Breadcrumbs";

//Breadcrumb
export interface BreadcrumbProps extends ComponentPropsWithoutRef<
  typeof BreadcrumbPrimitive
> {
  /** Marks this breadcrumb as the current page (sets `aria-current="page"`). */
  current?: boolean;
}

const Breadcrumb = forwardRef<
  ComponentRef<typeof BreadcrumbPrimitive>,
  BreadcrumbProps
>(({ className, current, ...props }, ref) => {
  return (
    <BreadcrumbPrimitive
      ref={ref}
      aria-current={current ? "page" : undefined}
      {...props}
      className={composeRenderProps(className, (className) =>
        cn(
          "flex min-w-0 items-center after:mx-1.5 after:size-3.5 after:shrink-0 after:icon-[lucide--chevron-right] last:after:hidden aria-[current=page]:font-medium aria-[current=page]:text-foreground",
          className,
        ),
      )}
    />
  );
});
Breadcrumb.displayName = "Breadcrumb";

export { Breadcrumbs, Breadcrumb };