Breadcrumbs

A navigation component that shows the current page's location within a navigational hierarchy. On mobile, intermediate items automatically collapse to an ellipsis when there are more than two items in the trail.

Source Code

import ilha from "ilha";
import { House, Folder } from "lucide";
import { Breadcrumbs, Icon } from "areia";

export default ilha.render(() => (
  <Breadcrumbs
    items={[
      {
        href: "/",
        children: "Home",
        icon: <Icon icon={House} />,
      },
      {
        href: "/projects",
        children: "Projects",
        icon: <Icon icon={Folder} />,
      },
      { children: "Current Project" },
    ]}
  />
));

Import

import { Breadcrumbs } from "areia";

Usage

Use children for composition-first breadcrumbs, or pass an items array for the convenient data-driven shortcut. With items, the last item is automatically treated as the current page — it renders without a link and receives aria-current="page".

import ilha from "ilha";
import { Breadcrumbs } from "areia";

export default ilha.render(() => (
  <Breadcrumbs
    items={[
      { href: "/", children: "Home" },
      { href: "/docs", children: "Docs" },
      { children: "Breadcrumbs" },
    ]}
  />
));

Examples

Basic

A simple three-level breadcrumb trail.

import ilha from "ilha";
import { Breadcrumbs } from "areia";

export default ilha.render(() => (
  <Breadcrumbs
    items={[
      { href: "/", children: "Home" },
      { href: "/docs", children: "Docs" },
      { children: "Breadcrumbs" },
    ]}
  />
));

Sizes

Two sizes are available: sm for compact UIs and base for the default appearance.

import ilha from "ilha";
import { Breadcrumbs } from "areia";

export default ilha.render(() => (
  <div class="flex flex-col gap-8">
    <Breadcrumbs
      size="sm"
      items={[
        { href: "/", children: "Home" },
        { href: "/docs", children: "Docs" },
        { children: "Small Breadcrumbs" },
      ]}
    />
    <Breadcrumbs
      size="base"
      items={[
        { href: "/", children: "Home" },
        { href: "/docs", children: "Docs" },
        { children: "Base Breadcrumbs" },
      ]}
    />
  </div>
));

With Icons

Each item accepts an optional icon prop. Use the Icon component with any Lucide icon to add context to the trail.

import ilha from "ilha";
import { House, Folder } from "lucide";
import { Breadcrumbs, Icon } from "areia";

export default ilha.render(() => (
  <Breadcrumbs
    items={[
      {
        href: "/",
        children: "Home",
        icon: <Icon icon={House} />,
      },
      {
        href: "/projects",
        children: "Projects",
        icon: <Icon icon={Folder} />,
      },
      { children: "Current Project" },
    ]}
  />
));

Loading

Set loading to true to replace the current page label with a pulsing skeleton placeholder while data is being fetched.

import ilha from "ilha";
import { House } from "lucide";
import { Breadcrumbs, Icon } from "areia";

export default ilha.render(() => (
  <Breadcrumbs
    loading
    items={[
      {
        href: "/",
        children: "Home",
        icon: <Icon icon={House} />,
      },
      { href: "/docs", children: "Docs" },
      { children: "Loading..." },
    ]}
  />
));

Clipboard

Provide a copyUrl to show a copy-to-clipboard button that appears on hover. After copying, a checkmark is displayed for two seconds.

import ilha from "ilha";
import { Breadcrumbs } from "areia";

export default ilha.render(() => (
  <Breadcrumbs
    items={[
      { href: "/", children: "Home" },
      { href: "/docs", children: "Docs" },
      { children: "Current Page" },
    ]}
    copyUrl="https://example.com/docs/current-page"
  />
));

Composition

Use Breadcrumbs.Link, Breadcrumbs.Separator, and Breadcrumbs.Current as children when you want React-style JSX composition. This bypasses the automatic mobile ellipsis generated by the items shortcut.

import ilha from "ilha";
import { Breadcrumbs } from "areia";

export default ilha.render(() => (
  <Breadcrumbs copyUrl="https://example.com/docs/current-page">
    <Breadcrumbs.Link href="/">Home</Breadcrumbs.Link>
    <Breadcrumbs.Separator />
    <Breadcrumbs.Link href="/docs">Docs</Breadcrumbs.Link>
    <Breadcrumbs.Separator />
    <Breadcrumbs.Current>Current Page</Breadcrumbs.Current>
  </Breadcrumbs>
));

API Reference

Breadcrumbs

Prop	Type	Default	Description
`items`	`BreadcrumbItem[]`	—	Breadcrumb trail items. The last item is treated as the current page.
`children`	`unknown`	—	Composed breadcrumb markup. Takes priority over `items`.
`size`	`"sm" \| "base"`	`"base"`	Controls the overall size of the breadcrumbs.
`loading`	`boolean`	`false`	When true, the current page label is replaced with a loading skeleton.
`copyUrl`	`string`	—	When provided, a copy-to-clipboard button appears on hover.
`class`	`string`	—	Additional CSS classes merged via `cn()`.
`className`	`string`	—	Alias for `class`.

BreadcrumbItem

Prop	Type	Default	Description
`href`	`string`	—	Link target URL. Omit for the current (last) item.
`children`	`unknown`	—	Display content for the breadcrumb item.
`icon`	`unknown`	—	Icon rendered before the label.

Breadcrumbs.Root and Breadcrumbs.Static are aliases for the base breadcrumb renderer.

Breadcrumbs.Link

Prop	Type	Default	Description
`href`	`string`	—	Link target URL.
`children`	`unknown`	—	Content rendered inside the link.
`icon`	`unknown`	—	Icon rendered before the label.
`class`	`string`	—	Additional CSS classes.
`className`	`string`	—	Alias for `class`.

Breadcrumbs.Current

Prop	Type	Default	Description
`children`	`unknown`	—	Label for the current page.
`icon`	`unknown`	—	Icon rendered before the label.
`loading`	`boolean`	—	When true, shows a loading skeleton instead of the label.
`class`	`string`	—	Additional CSS classes.
`className`	`string`	—	Alias for `class`.

Breadcrumbs.Separator

No component-specific props. Renders a chevron SVG separator.

Breadcrumbs.Clipboard

Prop	Type	Default	Description
`text`	`string`	—	The text to copy to the clipboard.
`class`	`string`	—	Additional CSS classes.
`className`	`string`	—	Alias for `class`.