Skip to content
Areia
Esc
↑↓navigate↵open⌘Jpreview
On this page

Breadcrumbs

A navigation component that shows the current page's location within a navigational hierarchy.

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

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.
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.

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.
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.

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

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

Was this page helpful?