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

# Breadcrumb

> Preview Breadcrumb, copy setup snippets, review examples, and inspect API exports for @tuturuuu/ui/breadcrumb.

<Info>
  Explore the live, interactive preview at [tuturuuu.com/ui/components/breadcrumb](https://tuturuuu.com/ui/components/breadcrumb).
</Info>

**Category:** Navigation · **Import:** `@tuturuuu/ui/breadcrumb` · **Status:** Live preview

## Installation

Install the shared UI package, import global styles once, then import the component from its public subpath.

```bash theme={null}
bun add @tuturuuu/ui
```

```tsx theme={null}
import '@tuturuuu/ui/globals.css';
import { Breadcrumb, BreadcrumbList, BreadcrumbItem, BreadcrumbLink } from '@tuturuuu/ui/breadcrumb';
```

## Usage

Copy the default usage snippet and adapt labels, state, and event handlers to the product surface.

```tsx theme={null}
import { Breadcrumb, BreadcrumbItem, BreadcrumbLink, BreadcrumbList } from '@tuturuuu/ui/breadcrumb';

<Breadcrumb>
  <BreadcrumbList>
    <BreadcrumbItem><BreadcrumbLink href="/">Home</BreadcrumbLink></BreadcrumbItem>
  </BreadcrumbList>
</Breadcrumb>
```

## Examples

Examples reuse the registry snippets so the docs stay aligned with the component catalog.

### Default

A minimal implementation using the current registry snippet.

```tsx theme={null}
import { Breadcrumb, BreadcrumbItem, BreadcrumbLink, BreadcrumbList } from '@tuturuuu/ui/breadcrumb';

<Breadcrumb>
  <BreadcrumbList>
    <BreadcrumbItem><BreadcrumbLink href="/">Home</BreadcrumbLink></BreadcrumbItem>
  </BreadcrumbList>
</Breadcrumb>
```

### Composition

Use the grouped exports when the primitive has slots, triggers, content regions, or providers.

```tsx theme={null}
import {
  Breadcrumb,
  BreadcrumbList,
  BreadcrumbItem,
  BreadcrumbLink,
} from '@tuturuuu/ui/breadcrumb';
```

### Package import

Import through the public package path so workspace and external apps share the same contract.

```tsx theme={null}
// Public package import
import { Breadcrumb } from '@tuturuuu/ui/breadcrumb';

// Workspace apps should keep importing through the package boundary.
```

## API reference

The public exports currently available from this component entry.

| Export           | Kind      |
| ---------------- | --------- |
| `Breadcrumb`     | component |
| `BreadcrumbList` | component |
| `BreadcrumbItem` | component |
| `BreadcrumbLink` | component |

## Customization

Common props, states, and composition points to review before using this component.

* Separator
* Current item
* Overflow

## Related components

* [Command](./command)
* [Quick Command Center](./quick-command-center)
* [Menubar](./menubar)