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

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

# BreadcrumbSeparator

**Type**: component

Visual separator between breadcrumb items Displays a separator icon (default: ChevronRight) between breadcrumb items to provide visual hierarchy and direction in the breadcrumb trail. Supports complete customization with any icon or content. Properly hidden from assistive technologies with accessibility attributes for clean screen reader navigation experience. The component uses CSS sizing constraints to ensure consistent icon sizing across different separator types and maintains visual alignment within the breadcrumb flow.

## JSX Usage

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

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

## Component Props

### children
- **Type**: `React.ReactNode`
- **Required**: No
- **Description**: Custom separator icon or content to display instead of default ChevronRight. Typically Lucide icons like Slash, ArrowRight, etc.

### className
- **Type**: `string`
- **Required**: No
- **Description**: Additional CSS classes to apply to the list item container

## Examples

### Example 1
```tsx
// Default ChevronRight separator
<BreadcrumbSeparator />
```
### Example 2
```tsx
// Custom Slash separator
import { Slash } from "lucide-react"
<BreadcrumbSeparator>
  <Slash />
</BreadcrumbSeparator>
```
### Example 3
```tsx
// Arrow right separator
import { ArrowRight } from "lucide-react"
<BreadcrumbSeparator>
  <ArrowRight />
</BreadcrumbSeparator>
```
### Example 4
```tsx
// Text separator
<BreadcrumbSeparator>
  <span className="text-muted-foreground">/</span>
</BreadcrumbSeparator>
```