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

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

`Breadcrumb` displays a hierarchical navigation trail that shows users their current location within an application. It supports current page indication, trailing slash customization, and overflow handling for long navigation paths.

## Default

Display a hierarchical navigation trail with slashes between items. Mark the current page with `isCurrentPage`.

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

## No trailing slash

Remove the trailing slash from the last breadcrumb item using `noTrailingSlash`.

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

## Overflow menu

Add an `OverflowMenu` to handle long breadcrumb trails. Use `OverflowMenuItem` components for menu options.

<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

Display a loading state with `skeleton` prop. Use `count` to specify the number of items.

<Breadcrumb noTrailingSlash skeleton count={3} />