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

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

# BreadcrumbLink

**Type**: component

Navigable link within breadcrumb trail Represents a clickable parent page in the breadcrumb hierarchy with smooth hover effects and transition animations. Supports composition via the `asChild` prop for seamless integration with routing libraries like Next.js Link, React Router, or Reach Router using the Radix UI Slot primitive for prop merging. Built on Radix UI Slot primitive which enables the asChild pattern - when asChild is true, the component merges its props with the immediate child element instead of rendering its own anchor tag. This allows for flexible composition while maintaining consistent styling and behavior.

## JSX Usage

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

<BreadcrumbLink
  asChild={true}
  className="value"
  href="value"
  onClick={handleClick}
>
  {/* Your content here */}
</BreadcrumbLink>
```

## Component Props

### asChild
- **Type**: `boolean`
- **Required**: No
- **Description**: When true, merges props with child element instead of rendering anchor. Enables composition with routing components

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

### href
- **Type**: `string`
- **Required**: No
- **Description**: Link destination URL (when asChild is false)

### children
- **Type**: `React.ReactNode`
- **Required**: No
- **Description**: Link content to display (text, icons, etc.)

### onClick
- **Type**: `(event: React.MouseEvent<HTMLAnchorElement>) => void`
- **Required**: No
- **Description**: Click handler for the link interaction

## Examples

### Example 1
```tsx
// Standard anchor link
<BreadcrumbLink href="/products">Products</BreadcrumbLink>
```
### Example 2
```tsx
// With Next.js Link using asChild
import { Link } from "next/link"
<BreadcrumbLink asChild>
  <Link href="/products">Products</Link>
</BreadcrumbLink>
```
### Example 3
```tsx
// With React Router Link
import { Link } from "react-router-dom"
<BreadcrumbLink asChild>
  <Link to="/products">Products</Link>
</BreadcrumbLink>
```
### Example 4
```tsx
// With click handler
<BreadcrumbLink
  href="/products"
  onClick={(e) => {
    e.preventDefault();
    navigate('/products');
  }}
>
  Products
</BreadcrumbLink>
```