---
components: ["Breadcrumb", "BreadcrumbItem"]
---

<script>
  import {
    Breadcrumb,
    BreadcrumbItem,
    OverflowMenu,
    OverflowMenuItem
  } from "carbon-components-svelte";
  import Preview from "../../components/Preview.svelte";
</script>

See the [Breadcrumbs recipe](/recipes/Breadcrumbs) for a reusable breadcrumbs component.

### Default

<Breadcrumb>
  <BreadcrumbItem href="/">Dashboard</BreadcrumbItem>
  <BreadcrumbItem href="/reports">Annual reports</BreadcrumbItem>
  <BreadcrumbItem href="/reports/2019" isCurrentPage>2019</BreadcrumbItem>
</Breadcrumb>

### No trailing slash

<Breadcrumb noTrailingSlash>
  <BreadcrumbItem href="/">Home</BreadcrumbItem>
  <BreadcrumbItem href="/profile" isCurrentPage>Profile</BreadcrumbItem>
</Breadcrumb>

### Overflow menu

<Breadcrumb>
  <BreadcrumbItem href="/">Home</BreadcrumbItem>
  <BreadcrumbItem href="/api">API documentation</BreadcrumbItem>
  <BreadcrumbItem>
    <OverflowMenu>
      <OverflowMenuItem href="/api/data" text="Data" />
      <OverflowMenuItem href="/api/data/latest" text="Latest" />
    </OverflowMenu>
  </BreadcrumbItem>
  <BreadcrumbItem href="/api/data/latest/usage" isCurrentPage>Usage</BreadcrumbItem>
</Breadcrumb>

### Skeleton

<Breadcrumb noTrailingSlash skeleton count={3} />