@neynar/ui/llm-docs/breadcrumb.llm.md

React UI component library built on shadcn/ui and Tailwind CSS

# Breadcrumb

**Type**: component

Breadcrumb navigation component that displays hierarchical page location A breadcrumb navigation component built on semantic HTML that shows the current page location within a navigational hierarchy. Provides users with contextual awareness of their position in the site structure and enables easy navigation to parent pages. Based on the shadcn/ui Breadcrumb component with accessibility features and support for composition patterns including custom separators, ellipsis for long paths, dropdown menus, and custom link components via the asChild prop.

## JSX Usage

```jsx
import { Breadcrumb } from '@neynar/ui';

<Breadcrumb
  className="value"
>
  {/* Your content here */}
</Breadcrumb>
```

## Component Props

### className
- **Type**: `string`
- **Required**: No
- **Description**: Additional CSS classes to apply to the navigation element

### children
- **Type**: `React.ReactNode`
- **Required**: No
- **Description**: Child breadcrumb elements (typically BreadcrumbList)

## Examples

### Example 1
```tsx
// Basic breadcrumb navigation
<Breadcrumb>
  <BreadcrumbList>
    <BreadcrumbItem>
      <BreadcrumbLink href="/">Home</BreadcrumbLink>
    </BreadcrumbItem>
    <BreadcrumbSeparator />
    <BreadcrumbItem>
      <BreadcrumbLink href="/products">Products</BreadcrumbLink>
    </BreadcrumbItem>
    <BreadcrumbSeparator />
    <BreadcrumbItem>
      <BreadcrumbPage>Laptop</BreadcrumbPage>
    </BreadcrumbItem>
  </BreadcrumbList>
</Breadcrumb>
```
### Example 2
```tsx
// With ellipsis for long paths
<Breadcrumb>
  <BreadcrumbList>
    <BreadcrumbItem>
      <BreadcrumbLink href="/">Home</BreadcrumbLink>
    </BreadcrumbItem>
    <BreadcrumbSeparator />
    <BreadcrumbItem>
      <BreadcrumbEllipsis />
    </BreadcrumbItem>
    <BreadcrumbSeparator />
    <BreadcrumbItem>
      <BreadcrumbLink href="/products/laptops">Laptops</BreadcrumbLink>
    </BreadcrumbItem>
    <BreadcrumbSeparator />
    <BreadcrumbItem>
      <BreadcrumbPage>Gaming Laptop</BreadcrumbPage>
    </BreadcrumbItem>
  </BreadcrumbList>
</Breadcrumb>
```
### Example 3
```tsx
// With Next.js Link integration using asChild
import { Link } from "next/link"
<Breadcrumb>
  <BreadcrumbList>
    <BreadcrumbItem>
      <BreadcrumbLink asChild>
        <Link href="/">Home</Link>
      </BreadcrumbLink>
    </BreadcrumbItem>
    <BreadcrumbSeparator />
    <BreadcrumbItem>
      <BreadcrumbPage>Current Page</BreadcrumbPage>
    </BreadcrumbItem>
  </BreadcrumbList>
</Breadcrumb>
```
### Example 4
```tsx
// With custom separator
import { Slash } from "lucide-react"
<Breadcrumb>
  <BreadcrumbList>
    <BreadcrumbItem>
      <BreadcrumbLink href="/">Home</BreadcrumbLink>
    </BreadcrumbItem>
    <BreadcrumbSeparator>
      <Slash />
    </BreadcrumbSeparator>
    <BreadcrumbItem>
      <BreadcrumbPage>Current Page</BreadcrumbPage>
    </BreadcrumbItem>
  </BreadcrumbList>
</Breadcrumb>
```