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

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

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

## Breadcrumb trail

<FileSource src="/framed/Breadcrumbs/Breadcrumbs" />

## Skeleton

<Breadcrumb noTrailingSlash skeleton count={3} />