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

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

# BreadcrumbEllipsis

**Type**: component

Ellipsis indicator for collapsed breadcrumb items Shows a horizontal ellipsis icon (MoreHorizontal) to indicate hidden or collapsed middle items in a long breadcrumb trail. Essential for deep navigation hierarchies where space is limited or mobile responsive design. Commonly used in combination with dropdown menus, popovers, or expandable sections to reveal the collapsed breadcrumb items on user interaction. The component provides a consistent 36px (9 × 4px) clickable area for better touch interaction when used as a trigger for dropdown menus. Includes hidden screen reader text to provide context about the collapsed content.

## JSX Usage

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

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

## Component Props

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

### children
- **Type**: `React.ReactNode`
- **Required**: No
- **Description**: Custom content to display instead of the default MoreHorizontal icon (rarely needed)

## Examples

### Example 1
```tsx
// Simple static ellipsis
<BreadcrumbEllipsis />
```
### Example 2
```tsx
// Interactive ellipsis with dropdown menu
<BreadcrumbItem>
  <DropdownMenu>
    <DropdownMenuTrigger asChild>
      <BreadcrumbEllipsis className="hover:bg-muted cursor-pointer" />
    </DropdownMenuTrigger>
    <DropdownMenuContent>
      <DropdownMenuItem>
        <BreadcrumbLink href="/level1">Level 1</BreadcrumbLink>
      </DropdownMenuItem>
      <DropdownMenuItem>
        <BreadcrumbLink href="/level1/level2">Level 2</BreadcrumbLink>
      </DropdownMenuItem>
    </DropdownMenuContent>
  </DropdownMenu>
</BreadcrumbItem>
```
### Example 3
```tsx
// With popover for collapsed items
<BreadcrumbItem>
  <Popover>
    <PopoverTrigger asChild>
      <BreadcrumbEllipsis className="hover:bg-accent" />
    </PopoverTrigger>
    <PopoverContent>
      <div className="space-y-2">
        <BreadcrumbLink href="/hidden1">Hidden Item 1</BreadcrumbLink>
        <BreadcrumbLink href="/hidden2">Hidden Item 2</BreadcrumbLink>
      </div>
    </PopoverContent>
  </Popover>
</BreadcrumbItem>
```