# Breadcrumb

Navigation component showing the current page's location in the site hierarchy

## Example

## Breadcrumb

Navigation component showing the current page's location in the site hierarchy

**Source:** [`packages/appkit-ui/src/react/ui/breadcrumb.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/breadcrumb.tsx)

### Props

This component extends standard HTML element attributes.

### Usage

```tsx
import { Breadcrumb } from '@databricks/appkit-ui';

```

## BreadcrumbEllipsis

Ellipsis indicator for collapsed breadcrumb items

**Source:** [`packages/appkit-ui/src/react/ui/breadcrumb.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/breadcrumb.tsx)

### Props

This component extends standard HTML element attributes.

### Usage

```tsx
import { BreadcrumbEllipsis } from '@databricks/appkit-ui';

```

## BreadcrumbItem

Individual item in the breadcrumb trail

**Source:** [`packages/appkit-ui/src/react/ui/breadcrumb.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/breadcrumb.tsx)

### Props

This component extends standard HTML element attributes.

### Usage

```tsx
import { BreadcrumbItem } from '@databricks/appkit-ui';

```

## BreadcrumbLink

Clickable link within a breadcrumb item

**Source:** [`packages/appkit-ui/src/react/ui/breadcrumb.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/breadcrumb.tsx)

### Props

| Prop | Type | Required | Default | Description |
|------|------|----------|---------|-------------|
| `asChild` | `boolean` |  | - | - |

### Usage

```tsx
import { BreadcrumbLink } from '@databricks/appkit-ui';

```

## BreadcrumbList

Ordered list container for breadcrumb items

**Source:** [`packages/appkit-ui/src/react/ui/breadcrumb.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/breadcrumb.tsx)

### Props

This component extends standard HTML element attributes.

### Usage

```tsx
import { BreadcrumbList } from '@databricks/appkit-ui';

```

## BreadcrumbPage

Current page indicator in the breadcrumb trail

**Source:** [`packages/appkit-ui/src/react/ui/breadcrumb.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/breadcrumb.tsx)

### Props

This component extends standard HTML element attributes.

### Usage

```tsx
import { BreadcrumbPage } from '@databricks/appkit-ui';

```

## BreadcrumbSeparator

Visual separator between breadcrumb items

**Source:** [`packages/appkit-ui/src/react/ui/breadcrumb.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/breadcrumb.tsx)

### Props

This component extends standard HTML element attributes.

### Usage

```tsx
import { BreadcrumbSeparator } from '@databricks/appkit-ui';

```