> ## Documentation Index
> Fetch the complete documentation index at: https://docs.cognite.com/llms.txt
> Use this file to discover all available pages before exploring further.

> ## Agent Instructions
> Cognite Data Fusion (CDF) is an industrial DataOps platform. Prefer English docs unless the user asks for another locale.
> Follow /_llms/ index links recursively until you reach page URLs ending in .md. Fetch those Markdown twins instead of HTML.
> For REST APIs, default to calendar version 20230101 (stable). Use 20230101-beta or 20230101-alpha only if the user is on a preview API. Cite paths under /api-reference/concepts/<version>/ and the Cdf-Version header. Prefer the Python SDK (cognite-sdk) unless the user is in JavaScript/TypeScript.
> Start here by task: platform overview /cdf/index.md; data modeling /cdf/dm/index.md; data integration /cdf/integration/index.md; access /cdf/access/index.md; CDF Toolkit /cdf/deploy/cdf_toolkit/index.md; REST quickstart /dev/quickstart.md; Python SDK /dev/sdks/python/index.md; Atlas AI /cdf/atlas_ai/concepts/index.md; Flows apps /cdf/flows/index.md; Aura UI /cdf/aura/index.md; MCP and IDE setup /dev/guides/ide_ai_integration.md.
> For implementation work, also load /skill.md.

# Breadcrumbs

> Breadcrumbs allow users to quickly and dependably gain their bearings within our product. It provides a hierarchical path to help users navigate back to previous pages efficiently.

<Badge color="blue">v1.0.0</Badge> | [View in Storybook](https://master--695bb4b1b8041ae09768950a.chromatic.com/?path=/docs/primitives-breadcrumb--docs)

<Frame>
  <iframe className="aura-storybook-embed w-full rounded-lg border border-zinc-950/10 dark:border-white/10" data-story-id="primitives-breadcrumb--basic" src="https://master--695bb4b1b8041ae09768950a.chromatic.com/iframe.html?id=primitives-breadcrumb--basic&viewMode=story&globals=theme:light" title="Breadcrumbs basic story" loading="lazy" style={{ height: "360px", display: "block", width: "100%" }} />
</Frame>

Breadcrumbs are location-based, not path-based. Location-based breadcrumbs illustrate the site's hierarchy and show the user where they are within that hierarchy. They do NOT show the path the user took to get to their current page view.

## When to use

* When a user's location in the app requires mutliple levels and would benefit from a clear orientation and hierarchical understanding of the app's structure.
* When users need to quickly navigate to a parent page.

## When to use something else

* Implementing a navigational flow for your product: Breadcrumbs should not be used as the primary source of navigation across pages.
* The page structure is flat: When users need to swap between different content or views at the same level, consider a [Menu](/cdf/aura/primitives/dropdown-menu), [Tabs](/cdf/aura/primitives/tabs), or [Segmented control](/cdf/aura/primitives/segmented-control).

## Dos and don'ts

* **Don't** make the current (active) breadcrumb item navigable.
* **Don't** pair with a back button. Research shows users are familiar with using a browser back button.
* **Don't** wrap page names onto a second line. Truncate instead and reveal the entire name with a Tooltip.
* **Don't** use multiple breadcrumbs per page.

## Behavior

* All links within a Breadcrumb should be navigable, except the current page, and should link to their respective pages on click or with keyboard navigation (Tab / Shift+Tab and Enter).
* The separators between page links are not interactive.
* The current breadcrumb page may optionally have a dropdown menu to house additional file management actions such as renaming, duplicating or deleting the file. Review Topbar guidelines for recommended menu structure.
* When space becomes limited, use an overflow menu to truncate the Breadcrumbs. Ensure the following logic is implemented:
  1. The first and last two page links should be shown, but the remaining breadcrumbs links in between are condensed into an overflow menu.
  2. If needed, all links, including the first, can collapse into an overflow menu. However, the active (current) page name should always be visible.

## Often used with

[Tooltip](/cdf/aura/primitives/tooltip) on truncated crumb labels; [Menu](/cdf/aura/primitives/dropdown-menu) for "…" overflow of middle segments.

## Accessibility

* Semantic structure: Wrap components in `<nav aria-label="Breadcrumb">` containing an ordered list (`<ol>`).
* Active state: Set `aria-current="page"` on the last breadcrumb item representing the current location.
* Separators: Hide visual separator icons (slashes, chevrons) from screen reader tree flows using `aria-hidden="true"`.

## Visual examples

The examples below are interactive and follow the doc site's theming: light mode when the docs site is in light mode, and dark mode when you switch the docs site to dark mode.

### Current page linked

Use Breadcrumbs with the current page linked when the active item should remain navigable—for example, when it opens a menu with page-level actions like rename or duplicate.

<Frame>
  <iframe className="aura-storybook-embed w-full rounded-lg border border-zinc-950/10 dark:border-white/10" data-story-id="primitives-breadcrumb--current-page-linked" src="https://master--695bb4b1b8041ae09768950a.chromatic.com/iframe.html?id=primitives-breadcrumb--current-page-linked&viewMode=story&globals=theme:light" title="Breadcrumbs current page linked story" loading="lazy" style={{ height: "360px", display: "block", width: "100%" }} />
</Frame>

### With ellipsis dropdown

Use an ellipsis dropdown in Breadcrumbs when the path is too long to display inline; middle segments collapse into a menu while keeping the first and last items visible.

<Frame>
  <iframe className="aura-storybook-embed w-full rounded-lg border border-zinc-950/10 dark:border-white/10" data-story-id="primitives-breadcrumb--with-ellipsis-dropdown" src="https://master--695bb4b1b8041ae09768950a.chromatic.com/iframe.html?id=primitives-breadcrumb--with-ellipsis-dropdown&viewMode=story&globals=theme:light" title="Breadcrumbs with ellipsis dropdown story" loading="lazy" style={{ height: "360px", display: "block", width: "100%" }} />
</Frame>

### With badge

Add a Badge to a Breadcrumb item when the current page or parent has a status worth highlighting—for example, draft, archived, or shared.

<Frame>
  <iframe className="aura-storybook-embed w-full rounded-lg border border-zinc-950/10 dark:border-white/10" data-story-id="primitives-breadcrumb--with-badge" src="https://master--695bb4b1b8041ae09768950a.chromatic.com/iframe.html?id=primitives-breadcrumb--with-badge&viewMode=story&globals=theme:light" title="Breadcrumbs with badge story" loading="lazy" style={{ height: "360px", display: "block", width: "100%" }} />
</Frame>

### Static ellipsis

Use a static ellipsis in Breadcrumbs to indicate truncated middle segments when those segments are not navigable or do not need a dropdown menu.

<Frame>
  <iframe className="aura-storybook-embed w-full rounded-lg border border-zinc-950/10 dark:border-white/10" data-story-id="primitives-breadcrumb--static-ellipsis" src="https://master--695bb4b1b8041ae09768950a.chromatic.com/iframe.html?id=primitives-breadcrumb--static-ellipsis&viewMode=story&globals=theme:light" title="Breadcrumbs static ellipsis story" loading="lazy" style={{ height: "360px", display: "block", width: "100%" }} />
</Frame>

### With page actions

Attach page actions to the current Breadcrumb item when file or resource management actions—such as rename, duplicate, or delete—belong at the hierarchy level of the active page.

<Frame>
  <iframe className="aura-storybook-embed w-full rounded-lg border border-zinc-950/10 dark:border-white/10" data-story-id="primitives-breadcrumb--with-page-actions" src="https://master--695bb4b1b8041ae09768950a.chromatic.com/iframe.html?id=primitives-breadcrumb--with-page-actions&viewMode=story&globals=theme:light" title="Breadcrumbs with page actions story" loading="lazy" style={{ height: "360px", display: "block", width: "100%" }} />
</Frame>

### Short

Use a short Breadcrumb trail when the hierarchy has only two or three levels and full path context is still clear without overflow handling.

<Frame>
  <iframe className="aura-storybook-embed w-full rounded-lg border border-zinc-950/10 dark:border-white/10" data-story-id="primitives-breadcrumb--short" src="https://master--695bb4b1b8041ae09768950a.chromatic.com/iframe.html?id=primitives-breadcrumb--short&viewMode=story&globals=theme:light" title="Breadcrumbs short story" loading="lazy" style={{ height: "360px", display: "block", width: "100%" }} />
</Frame>

### Long path

Use Breadcrumbs with a long path to show deep hierarchy; apply overflow rules so users can navigate to parent levels without losing their current location.

<Frame>
  <iframe className="aura-storybook-embed w-full rounded-lg border border-zinc-950/10 dark:border-white/10" data-story-id="primitives-breadcrumb--long-path" src="https://master--695bb4b1b8041ae09768950a.chromatic.com/iframe.html?id=primitives-breadcrumb--long-path&viewMode=story&globals=theme:light" title="Breadcrumbs long path story" loading="lazy" style={{ height: "360px", display: "block", width: "100%" }} />
</Frame>

### Custom separator

Use a custom separator in Breadcrumbs only when product branding requires it; default separators are preferred for consistency across the application.

<Frame>
  <iframe className="aura-storybook-embed w-full rounded-lg border border-zinc-950/10 dark:border-white/10" data-story-id="primitives-breadcrumb--custom-separator" src="https://master--695bb4b1b8041ae09768950a.chromatic.com/iframe.html?id=primitives-breadcrumb--custom-separator&viewMode=story&globals=theme:light" title="Breadcrumbs custom separator story" loading="lazy" style={{ height: "360px", display: "block", width: "100%" }} />
</Frame>

### With icon

Add an icon to a Breadcrumb segment when the resource type should be visually distinguished—for example, a folder, file, or project icon beside the label.

<Frame>
  <iframe className="aura-storybook-embed w-full rounded-lg border border-zinc-950/10 dark:border-white/10" data-story-id="primitives-breadcrumb--with-icon" src="https://master--695bb4b1b8041ae09768950a.chromatic.com/iframe.html?id=primitives-breadcrumb--with-icon&viewMode=story&globals=theme:light" title="Breadcrumbs with icon story" loading="lazy" style={{ height: "360px", display: "block", width: "100%" }} />
</Frame>

### Constrained container

Test Breadcrumbs in a constrained container to ensure truncation, ellipsis, and overflow menus behave correctly when horizontal space is limited.

<Frame>
  <iframe className="aura-storybook-embed w-full rounded-lg border border-zinc-950/10 dark:border-white/10" data-story-id="primitives-breadcrumb--constrained-container" src="https://master--695bb4b1b8041ae09768950a.chromatic.com/iframe.html?id=primitives-breadcrumb--constrained-container&viewMode=story&globals=theme:light" title="Breadcrumbs constrained container story" loading="lazy" style={{ height: "360px", display: "block", width: "100%" }} />
</Frame>

### Long item names

Truncate long Breadcrumb item names and reveal the full label in a Tooltip on hover or focus so paths remain scannable without breaking layout.

<Frame>
  <iframe className="aura-storybook-embed w-full rounded-lg border border-zinc-950/10 dark:border-white/10" data-story-id="primitives-breadcrumb--long-item-names" src="https://master--695bb4b1b8041ae09768950a.chromatic.com/iframe.html?id=primitives-breadcrumb--long-item-names&viewMode=story&globals=theme:light" title="Breadcrumbs long item names story" loading="lazy" style={{ height: "360px", display: "block", width: "100%" }} />
</Frame>

### Many items

Use overflow handling when Breadcrumbs contain many items; show the first segment, an ellipsis menu for middle items, and the last two segments including the current page.

<Frame>
  <iframe className="aura-storybook-embed w-full rounded-lg border border-zinc-950/10 dark:border-white/10" data-story-id="primitives-breadcrumb--many-items" src="https://master--695bb4b1b8041ae09768950a.chromatic.com/iframe.html?id=primitives-breadcrumb--many-items&viewMode=story&globals=theme:light" title="Breadcrumbs many items story" loading="lazy" style={{ height: "360px", display: "block", width: "100%" }} />
</Frame>

### Single item

A single-item Breadcrumb shows only the current page when there is no parent hierarchy to display, or when the user lands at a top-level destination.

<Frame>
  <iframe className="aura-storybook-embed w-full rounded-lg border border-zinc-950/10 dark:border-white/10" data-story-id="primitives-breadcrumb--single-item" src="https://master--695bb4b1b8041ae09768950a.chromatic.com/iframe.html?id=primitives-breadcrumb--single-item&viewMode=story&globals=theme:light" title="Breadcrumbs single item story" loading="lazy" style={{ height: "360px", display: "block", width: "100%" }} />
</Frame>

### Empty

Handle an empty Breadcrumb state when hierarchy data is not yet loaded or unavailable; avoid rendering a broken or misleading path.

<Frame>
  <iframe className="aura-storybook-embed w-full rounded-lg border border-zinc-950/10 dark:border-white/10" data-story-id="primitives-breadcrumb--empty" src="https://master--695bb4b1b8041ae09768950a.chromatic.com/iframe.html?id=primitives-breadcrumb--empty&viewMode=story&globals=theme:light" title="Breadcrumbs empty story" loading="lazy" style={{ height: "360px", display: "block", width: "100%" }} />
</Frame>

### Small container many long items

Combine a small container with many long Breadcrumb items to validate that aggressive truncation and overflow still preserve navigation to key parent levels.

<Frame>
  <iframe className="aura-storybook-embed w-full rounded-lg border border-zinc-950/10 dark:border-white/10" data-story-id="primitives-breadcrumb--small-container-many-long-items" src="https://master--695bb4b1b8041ae09768950a.chromatic.com/iframe.html?id=primitives-breadcrumb--small-container-many-long-items&viewMode=story&globals=theme:light" title="Breadcrumbs small container many long items story" loading="lazy" style={{ height: "360px", display: "block", width: "100%" }} />
</Frame>