Skip to main content
⚠️ AppKit is in an early development phase and is subject to change without notice. DO NOT use in production environments.

# Breadcrumb

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

## Example​

    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​

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

Source: `packages/appkit-ui/src/react/ui/breadcrumb.tsx`

### Props​

This component extends standard HTML element attributes.

### Usage​

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

    <Breadcrumb /* props */ />

## BreadcrumbEllipsis​

Ellipsis indicator for collapsed breadcrumb items

Source: `packages/appkit-ui/src/react/ui/breadcrumb.tsx`

### Props​

This component extends standard HTML element attributes.

### Usage​

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

    <BreadcrumbEllipsis /* props */ />

## BreadcrumbItem​

Individual item in the breadcrumb trail

Source: `packages/appkit-ui/src/react/ui/breadcrumb.tsx`

### Props​

This component extends standard HTML element attributes.

### Usage​

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

    <BreadcrumbItem /* props */ />

## BreadcrumbLink​

Clickable link within a breadcrumb item

Source: `packages/appkit-ui/src/react/ui/breadcrumb.tsx`

### Props​

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

### Usage​

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

    <BreadcrumbLink /* props */ />

## BreadcrumbList​

Ordered list container for breadcrumb items

Source: `packages/appkit-ui/src/react/ui/breadcrumb.tsx`

### Props​

This component extends standard HTML element attributes.

### Usage​

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

    <BreadcrumbList /* props */ />

## BreadcrumbPage​

Current page indicator in the breadcrumb trail

Source: `packages/appkit-ui/src/react/ui/breadcrumb.tsx`

### Props​

This component extends standard HTML element attributes.

### Usage​

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

    <BreadcrumbPage /* props */ />

## BreadcrumbSeparator​

Visual separator between breadcrumb items

Source: `packages/appkit-ui/src/react/ui/breadcrumb.tsx`

### Props​

This component extends standard HTML element attributes.

### Usage​

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

    <BreadcrumbSeparator /* props */ />