Breadcrumb

Displays the path to the current resource using a hierarchy of links.

import { Breadcrumb } from "@smartacteam/ambient-web/breadcrumb";
import { Button } from "@smartacteam/ambient-web/button";
import { Menu } from "@smartacteam/ambient-web/menu";

export function BreadcrumbDemo() {
  return (
    <Breadcrumb.Root>
      <Breadcrumb.List>
        <Breadcrumb.Item>
          <Breadcrumb.Link render={<a href="#">Home</a>} />
        </Breadcrumb.Item>
        <Breadcrumb.Separator />
        <Breadcrumb.Item>
          <Menu.Root>
            <Menu.Trigger
              render={
                <Button size="icon-sm" variant="ghost">
                  <Breadcrumb.Ellipsis />
                  <span className="sr-only">Toggle menu</span>
                </Button>
              }
            />
            <Menu.Content align="start">
              <Menu.Group>
                <Menu.Item>Documentation</Menu.Item>
                <Menu.Item>Themes</Menu.Item>
                <Menu.Item>GitHub</Menu.Item>
              </Menu.Group>
            </Menu.Content>
          </Menu.Root>
        </Breadcrumb.Item>
        <Breadcrumb.Separator />
        <Breadcrumb.Item>
          <Breadcrumb.Link render={<a href="#">Components</a>} />
        </Breadcrumb.Item>
        <Breadcrumb.Separator />
        <Breadcrumb.Item>
          <Breadcrumb.Page>Breadcrumb</Breadcrumb.Page>
        </Breadcrumb.Item>
      </Breadcrumb.List>
    </Breadcrumb.Root>
  );
}

Usage

import { Breadcrumb } from "@smartacteam/ambient-web/breadcrumb";

<Breadcrumb.Root>
  <Breadcrumb.List>
    <Breadcrumb.Item>
      <Breadcrumb.Link render={<a href="/" />}>Home</Breadcrumb.Link>
    </Breadcrumb.Item>
    <Breadcrumb.Separator />
    <Breadcrumb.Item>
      <Breadcrumb.Link render={<a href="/components" />}>
        Components
      </Breadcrumb.Link>
    </Breadcrumb.Item>
    <Breadcrumb.Separator />
    <Breadcrumb.Item>
      <Breadcrumb.Page>Breadcrumb</Breadcrumb.Page>
    </Breadcrumb.Item>
  </Breadcrumb.List>
</Breadcrumb.Root>

Examples

Basic

A basic breadcrumb with a home link and a components link.

import { Breadcrumb } from "@smartacteam/ambient-web/breadcrumb";

export function BreadcrumbBasicDemo() {
  return (
    <Breadcrumb.Root>
      <Breadcrumb.List>
        <Breadcrumb.Item>
          <Breadcrumb.Link href="#">Home</Breadcrumb.Link>
        </Breadcrumb.Item>
        <Breadcrumb.Separator />
        <Breadcrumb.Item>
          <Breadcrumb.Link href="#">Components</Breadcrumb.Link>
        </Breadcrumb.Item>
        <Breadcrumb.Separator />
        <Breadcrumb.Item>
          <Breadcrumb.Page>Breadcrumb</Breadcrumb.Page>
        </Breadcrumb.Item>
      </Breadcrumb.List>
    </Breadcrumb.Root>
  );
}

Title

Use <Breadcrumb.Title /> after <Breadcrumb.List /> to add a title to the breadcrumb.

import { Breadcrumb } from "@smartacteam/ambient-web/breadcrumb";

export function BreadcrumbBasicDemo() {
  return (
    <Breadcrumb.Root>
      <Breadcrumb.List>
        <Breadcrumb.Item>
          <Breadcrumb.Link href="#">Dashboard</Breadcrumb.Link>
        </Breadcrumb.Item>
        <Breadcrumb.Separator />
        <Breadcrumb.Item>
          <Breadcrumb.Link href="#">Homes</Breadcrumb.Link>
        </Breadcrumb.Item>
        <Breadcrumb.Separator />
      </Breadcrumb.List>
      <Breadcrumb.Title>2461 Fir Terrace, Austin TX 78640</Breadcrumb.Title>
    </Breadcrumb.Root>
  );
}

Custom separator

Use a custom component as children for <Breadcrumb.Separator /> to create a custom separator.

import { Breadcrumb } from "@smartacteam/ambient-web/breadcrumb";
import { CentralIcon } from "@smartacteam/ambient-web/icon";

export function BreadcrumbSeparatorDemo() {
  return (
    <Breadcrumb.Root>
      <Breadcrumb.List>
        <Breadcrumb.Item>
          <Breadcrumb.Link href="#">Home</Breadcrumb.Link>
        </Breadcrumb.Item>
        <Breadcrumb.Separator>
          <CentralIcon
            name="IconChevronDoubleRight"
            radius="2"
            stroke="1.5"
            fill="outlined"
          />
        </Breadcrumb.Separator>
        <Breadcrumb.Item>
          <Breadcrumb.Link href="#">Components</Breadcrumb.Link>
        </Breadcrumb.Item>
        <Breadcrumb.Separator>
          <CentralIcon
            name="IconChevronDoubleRight"
            radius="2"
            stroke="1.5"
            fill="outlined"
          />
        </Breadcrumb.Separator>
        <Breadcrumb.Item>
          <Breadcrumb.Page>Breadcrumb</Breadcrumb.Page>
        </Breadcrumb.Item>
      </Breadcrumb.List>
    </Breadcrumb.Root>
  );
}

You can compose <Breadcrumb.Item /> with a <Menu /> to create a dropdown in the breadcrumb.

import Link from "next/link";

import { Breadcrumb } from "@smartacteam/ambient-web/breadcrumb";
import { Button } from "@smartacteam/ambient-web/button";
import { CentralIcon } from "@smartacteam/ambient-web/icon";
import { Menu } from "@smartacteam/ambient-web/menu";

export function BreadcrumbMenuDemo() {
  return (
    <Breadcrumb.Root>
      <Breadcrumb.List>
        <Breadcrumb.Item>
          <Breadcrumb.Link render={<Link href="/">Home</Link>} />
        </Breadcrumb.Item>
        <Breadcrumb.Separator>
          <CentralIcon
            name="IconChevronDoubleRight"
            radius="2"
            stroke="1.5"
            fill="outlined"
          />
        </Breadcrumb.Separator>
        <Breadcrumb.Item>
          <Menu.Root>
            <Menu.Trigger
              render={
                <Button variant="ghost" size="sm">
                  Components
                  <CentralIcon
                    name="IconChevronDownMedium"
                    radius="2"
                    stroke="1.5"
                    fill="outlined"
                  />
                </Button>
              }
            />
            <Menu.Content align="start">
              <Menu.Group>
                <Menu.Item>Documentation</Menu.Item>
                <Menu.Item>Themes</Menu.Item>
                <Menu.Item>GitHub</Menu.Item>
              </Menu.Group>
            </Menu.Content>
          </Menu.Root>
        </Breadcrumb.Item>
        <Breadcrumb.Separator>
          <CentralIcon
            name="IconChevronDoubleRight"
            radius="2"
            stroke="1.5"
            fill="outlined"
          />
        </Breadcrumb.Separator>
        <Breadcrumb.Item>
          <Breadcrumb.Page>Breadcrumb</Breadcrumb.Page>
        </Breadcrumb.Item>
      </Breadcrumb.List>
    </Breadcrumb.Root>
  );
}

Collapsed

We provide a <Breadcrumb.Ellipsis /> component to show a collapsed state when the breadcrumb is too long.

import Link from "next/link";

import { Breadcrumb } from "@smartacteam/ambient-web/breadcrumb";

export function BreadcrumbEllipsisDemo() {
  return (
    <Breadcrumb.Root>
      <Breadcrumb.List>
        <Breadcrumb.Item>
          <Breadcrumb.Link render={<Link href="/">Home</Link>} />
        </Breadcrumb.Item>
        <Breadcrumb.Separator />
        <Breadcrumb.Item>
          <Breadcrumb.Ellipsis />
        </Breadcrumb.Item>
        <Breadcrumb.Separator />
        <Breadcrumb.Item>
          <Breadcrumb.Link
            render={<Link href="/docs/components">Components</Link>}
          />
        </Breadcrumb.Item>
        <Breadcrumb.Separator />
        <Breadcrumb.Item>
          <Breadcrumb.Page>Breadcrumb.</Breadcrumb.Page>
        </Breadcrumb.Item>
      </Breadcrumb.List>
    </Breadcrumb.Root>
  );
}

Link component

To use a custom link component from your routing library, you can use the render prop on <Breadcrumb.Link />.

import Link from "next/link";

import { Breadcrumb } from "@smartacteam/ambient-web/breadcrumb";

export function BreadcrumbLinkDemo() {
  return (
    <Breadcrumb.Root>
      <Breadcrumb.List>
        <Breadcrumb.Item>
          <Breadcrumb.Link render={<Link href="#link-component">Home</Link>} />
        </Breadcrumb.Item>
        <Breadcrumb.Separator />
        <Breadcrumb.Item>
          <Breadcrumb.Link
            render={<Link href="#link-component">Components</Link>}
          />
        </Breadcrumb.Item>
        <Breadcrumb.Separator />
        <Breadcrumb.Item>
          <Breadcrumb.Page>Breadcrumb.</Breadcrumb.Page>
        </Breadcrumb.Item>
      </Breadcrumb.List>
    </Breadcrumb.Root>
  );
}