# Breadcrumb

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

## Example[​](#example "Direct link to Example")

<!-- -->

```tsx
import {
  Breadcrumb,
  BreadcrumbEllipsis,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbList,
  BreadcrumbPage,
  BreadcrumbSeparator,
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
} from "@databricks/appkit-ui/react"

export default function BreadcrumbExample() {
  return (
    <Breadcrumb>
      <BreadcrumbList>
        <BreadcrumbItem>
          <BreadcrumbLink href="/">Home</BreadcrumbLink>
        </BreadcrumbItem>
        <BreadcrumbSeparator />
        <BreadcrumbItem>
          <DropdownMenu>
            <DropdownMenuTrigger className="flex items-center gap-1">
              <BreadcrumbEllipsis className="h-4 w-4" />
              <span className="sr-only">Toggle menu</span>
            </DropdownMenuTrigger>
            <DropdownMenuContent align="start">
              <DropdownMenuItem>Documentation</DropdownMenuItem>
              <DropdownMenuItem>Themes</DropdownMenuItem>
              <DropdownMenuItem>GitHub</DropdownMenuItem>
            </DropdownMenuContent>
          </DropdownMenu>
        </BreadcrumbItem>
        <BreadcrumbSeparator />
        <BreadcrumbItem>
          <BreadcrumbLink href="/docs/components">Components</BreadcrumbLink>
        </BreadcrumbItem>
        <BreadcrumbSeparator />
        <BreadcrumbItem>
          <BreadcrumbPage>Breadcrumb</BreadcrumbPage>
        </BreadcrumbItem>
      </BreadcrumbList>
    </Breadcrumb>
  )
}

```

## Breadcrumb[​](#breadcrumb-1 "Direct link to 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[​](#props "Direct link to Props")

This component extends standard HTML element attributes.

### Usage[​](#usage "Direct link to Usage")

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

<Breadcrumb /* props */ />

```

## BreadcrumbEllipsis[​](#breadcrumbellipsis "Direct link to 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[​](#props-1 "Direct link to Props")

This component extends standard HTML element attributes.

### Usage[​](#usage-1 "Direct link to Usage")

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

<BreadcrumbEllipsis /* props */ />

```

## BreadcrumbItem[​](#breadcrumbitem "Direct link to 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[​](#props-2 "Direct link to Props")

This component extends standard HTML element attributes.

### Usage[​](#usage-2 "Direct link to Usage")

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

<BreadcrumbItem /* props */ />

```

## BreadcrumbLink[​](#breadcrumblink "Direct link to 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[​](#props-3 "Direct link to Props")

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

### Usage[​](#usage-3 "Direct link to Usage")

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

<BreadcrumbLink /* props */ />

```

## BreadcrumbList[​](#breadcrumblist "Direct link to 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[​](#props-4 "Direct link to Props")

This component extends standard HTML element attributes.

### Usage[​](#usage-4 "Direct link to Usage")

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

<BreadcrumbList /* props */ />

```

## BreadcrumbPage[​](#breadcrumbpage "Direct link to 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[​](#props-5 "Direct link to Props")

This component extends standard HTML element attributes.

### Usage[​](#usage-5 "Direct link to Usage")

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

<BreadcrumbPage /* props */ />

```

## BreadcrumbSeparator[​](#breadcrumbseparator "Direct link to 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[​](#props-6 "Direct link to Props")

This component extends standard HTML element attributes.

### Usage[​](#usage-6 "Direct link to Usage")

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

<BreadcrumbSeparator /* props */ />

```