---
title: Breadcrumbs
description: A navigation component that shows the current page's location within a navigational hierarchy.
order: 4
tags: [components]
---

import { Preview } from "$lib/components/preview";
import {
  BreadcrumbsBasicDemo,
  BreadcrumbsClipboardDemo,
  BreadcrumbsCompositionDemo,
  BreadcrumbsHeroDemo,
  BreadcrumbsIconsDemo,
  BreadcrumbsLoadingDemo,
  BreadcrumbsSizesDemo,
} from "$lib/components/breadcrumbs-demo";

# 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](https://github.com/ilhajs/areia/blob/main/packages/areia/src/components/breadcrumbs/index.ts)

<Preview
  code={
    'import ilha from "ilha";\nimport { House, Folder } from "lucide";\nimport { Breadcrumbs, Icon } from "areia";\n\nexport default ilha.render(() => (\n  <Breadcrumbs\n    items={[\n      {\n        href: "/",\n        children: "Home",\n        icon: <Icon icon={House} />,\n      },\n      {\n        href: "/projects",\n        children: "Projects",\n        icon: <Icon icon={Folder} />,\n      },\n      { children: "Current Project" },\n    ]}\n  />\n));'
  }
  lang="tsx"
>
  <BreadcrumbsHeroDemo />
</Preview>

## Import

```ts
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"`.

<Preview
  code={
    'import ilha from "ilha";\nimport { Breadcrumbs } from "areia";\n\nexport default ilha.render(() => (\n  <Breadcrumbs\n    items={[\n      { href: "/", children: "Home" },\n      { href: "/docs", children: "Docs" },\n      { children: "Breadcrumbs" },\n    ]}\n  />\n));'
  }
  lang="tsx"
>
  <BreadcrumbsBasicDemo />
</Preview>

## Examples

### Basic

A simple three-level breadcrumb trail.

<Preview
  code={
    'import ilha from "ilha";\nimport { Breadcrumbs } from "areia";\n\nexport default ilha.render(() => (\n  <Breadcrumbs\n    items={[\n      { href: "/", children: "Home" },\n      { href: "/docs", children: "Docs" },\n      { children: "Breadcrumbs" },\n    ]}\n  />\n));'
  }
  lang="tsx"
>
  <BreadcrumbsBasicDemo />
</Preview>

### Sizes

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

<Preview
  code={
    'import ilha from "ilha";\nimport { Breadcrumbs } from "areia";\n\nexport default ilha.render(() => (\n  <div class="flex flex-col gap-8">\n    <Breadcrumbs\n      size="sm"\n      items={[\n        { href: "/", children: "Home" },\n        { href: "/docs", children: "Docs" },\n        { children: "Small Breadcrumbs" },\n      ]}\n    />\n    <Breadcrumbs\n      size="base"\n      items={[\n        { href: "/", children: "Home" },\n        { href: "/docs", children: "Docs" },\n        { children: "Base Breadcrumbs" },\n      ]}\n    />\n  </div>\n));'
  }
  lang="tsx"
>
  <BreadcrumbsSizesDemo />
</Preview>

### With Icons

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

<Preview
  code={
    'import ilha from "ilha";\nimport { House, Folder } from "lucide";\nimport { Breadcrumbs, Icon } from "areia";\n\nexport default ilha.render(() => (\n  <Breadcrumbs\n    items={[\n      {\n        href: "/",\n        children: "Home",\n        icon: <Icon icon={House} />,\n      },\n      {\n        href: "/projects",\n        children: "Projects",\n        icon: <Icon icon={Folder} />,\n      },\n      { children: "Current Project" },\n    ]}\n  />\n));'
  }
  lang="tsx"
>
  <BreadcrumbsIconsDemo />
</Preview>

### Loading

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

<Preview
  code={
    'import ilha from "ilha";\nimport { House } from "lucide";\nimport { Breadcrumbs, Icon } from "areia";\n\nexport default ilha.render(() => (\n  <Breadcrumbs\n    loading\n    items={[\n      {\n        href: "/",\n        children: "Home",\n        icon: <Icon icon={House} />,\n      },\n      { href: "/docs", children: "Docs" },\n      { children: "Loading..." },\n    ]}\n  />\n));'
  }
  lang="tsx"
>
  <BreadcrumbsLoadingDemo />
</Preview>

### Clipboard

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

<Preview
  code={
    'import ilha from "ilha";\nimport { Breadcrumbs } from "areia";\n\nexport default ilha.render(() => (\n  <Breadcrumbs\n    items={[\n      { href: "/", children: "Home" },\n      { href: "/docs", children: "Docs" },\n      { children: "Current Page" },\n    ]}\n    copyUrl="https://example.com/docs/current-page"\n  />\n));'
  }
  lang="tsx"
>
  <BreadcrumbsClipboardDemo />
</Preview>

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

<Preview
  code={
    'import ilha from "ilha";\nimport { Breadcrumbs } from "areia";\n\nexport default ilha.render(() => (\n  <Breadcrumbs copyUrl="https://example.com/docs/current-page">\n    <Breadcrumbs.Link href="/">Home</Breadcrumbs.Link>\n    <Breadcrumbs.Separator />\n    <Breadcrumbs.Link href="/docs">Docs</Breadcrumbs.Link>\n    <Breadcrumbs.Separator />\n    <Breadcrumbs.Current>Current Page</Breadcrumbs.Current>\n  </Breadcrumbs>\n));'
  }
  lang="tsx"
>
  <BreadcrumbsCompositionDemo />
</Preview>

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