> ## Documentation Index
> Fetch the complete documentation index at: https://api.fanvue.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.
# Breadcrumb
> A trail of links showing where the current page sits in the hierarchy, built from BreadcrumbList, BreadcrumbItem, BreadcrumbLink, BreadcrumbPage and BreadcrumbSeparator.
```tsx theme={null}
import {
Breadcrumb,
BreadcrumbItem,
BreadcrumbLink,
BreadcrumbList,
BreadcrumbPage,
BreadcrumbSeparator,
} from "@fanvue/ui";
import type {
BreadcrumbItemProps,
BreadcrumbLinkProps,
BreadcrumbListProps,
BreadcrumbPageProps,
BreadcrumbProps,
BreadcrumbSeparatorProps,
BreadcrumbSize,
} from "@fanvue/ui";
```
## Examples
## Size 12px
```tsx theme={null}
import {
Breadcrumb,
BreadcrumbItem,
BreadcrumbLink,
BreadcrumbList,
BreadcrumbPage,
} from "@fanvue/ui";
Home
Section
Current Page
```
## Custom separator
```tsx theme={null}
import {
Breadcrumb,
BreadcrumbItem,
BreadcrumbLink,
BreadcrumbList,
BreadcrumbPage,
ChevronRightIcon,
} from "@fanvue/ui";
}>
Home
Section
Current Page
```
## 2 items
```tsx theme={null}
import {
Breadcrumb,
BreadcrumbItem,
BreadcrumbLink,
BreadcrumbList,
BreadcrumbPage,
} from "@fanvue/ui";
Home
Current Page
```
## Size 14px
```tsx theme={null}
import {
Breadcrumb,
BreadcrumbItem,
BreadcrumbLink,
BreadcrumbList,
BreadcrumbPage,
} from "@fanvue/ui";
Home
Section
Current Page
```
## 3 items
```tsx theme={null}
import {
Breadcrumb,
BreadcrumbItem,
BreadcrumbLink,
BreadcrumbList,
BreadcrumbPage,
} from "@fanvue/ui";
Home
Section
Current Page
```
## Props
## Breadcrumb
Root navigation wrapper for the breadcrumb trail.
Accessible label for the breadcrumb navigation landmark.
## BreadcrumbItem
List item wrapper for a single breadcrumb entry or separator.
Takes no props of its own beyond the standard attributes of the element it renders.
## BreadcrumbLink
Anchor element for a non-current breadcrumb step. Supports `asChild` for router-aware link components.
Render the link as a child element (e.g. a router `Link`).
## BreadcrumbList
Ordered list container for breadcrumb items. Automatically injects a separator between each child item and shares the trail `BreadcrumbSize` with its descendants.
Custom separator element rendered between items.
Text size preset applied to every item in the trail.
## BreadcrumbPage
Non-interactive label representing the current page in the breadcrumb trail.
Takes no props of its own beyond the standard attributes of the element it renders.
## BreadcrumbSeparator
Visual separator rendered between breadcrumb items. Renders a `/` glyph by default and is hidden from assistive technology.
Takes no props of its own beyond the standard attributes of the element it renders.
## Exported types
Also exported from `@fanvue/ui`: `BreadcrumbItemProps`, `BreadcrumbLinkProps`, `BreadcrumbListProps`, `BreadcrumbPageProps`, `BreadcrumbProps`, `BreadcrumbSeparatorProps`, `BreadcrumbSize`.
***
**Setup:** [Installation](/docs/ui/installation) · [Theming](/docs/ui/theming)