---
title: "Breadcrumb"
description: "Navigation trail primitive with ellipsis + separators."
section: "Libraries"
group: "UI components"
order: 502
---

## Usage

```tsx
import {
  Breadcrumb,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbList,
  BreadcrumbPage,
  BreadcrumbSeparator,
} from "@aeontel/ui";

<Breadcrumb>
  <BreadcrumbList>
    <BreadcrumbItem>
      <BreadcrumbLink href="/">Home</BreadcrumbLink>
    </BreadcrumbItem>
    <BreadcrumbSeparator />
    <BreadcrumbItem>
      <BreadcrumbPage>Agents</BreadcrumbPage>
    </BreadcrumbItem>
  </BreadcrumbList>
</Breadcrumb>;
```

## Exports

### `Breadcrumb`

Breadcrumb navigation root.

```ts
Breadcrumb(props: React.ComponentProps<"nav">): JSX.Element
```

### `BreadcrumbList`

Ordered list of breadcrumb items.

```ts
BreadcrumbList(props: React.ComponentProps<"ol">): JSX.Element
```

### `BreadcrumbItem`

Individual breadcrumb item.

```ts
BreadcrumbItem(props: React.ComponentProps<"li">): JSX.Element
```

### `BreadcrumbLink`

Clickable breadcrumb link.

```ts
BreadcrumbLink(props: { as?: T; className?: string } & React.ComponentPropsWithoutRef<T>): JSX.Element
```

**Props**

| Prop         | Type                  | Default | Description |
| ------------ | --------------------- | ------- | ----------- |
| `as?`        | `T \| undefined`      | —       |             |
| `className?` | `string \| undefined` | —       |             |

### `BreadcrumbPage`

Current page (non-link) breadcrumb entry.

```ts
BreadcrumbPage(props: React.ComponentProps<"span">): JSX.Element
```

### `BreadcrumbSeparator`

Separator between breadcrumb items.

```ts
BreadcrumbSeparator(props: React.ComponentProps<"li">): JSX.Element
```

### `BreadcrumbEllipsis`

Ellipsis marker for collapsed breadcrumbs.

```ts
BreadcrumbEllipsis(props: React.ComponentProps<"span">): JSX.Element
```