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

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

# BreadcrumbPage

**Type**: component

Current page indicator in breadcrumb trail Represents the current page (non-clickable) at the end of the breadcrumb trail. Styled with prominent text color and marked with comprehensive accessibility attributes including `aria-current="page"` for precise screen reader identification of the user's current location within the site hierarchy. This component uses specific ARIA attributes to indicate it represents a link-like element that is disabled, providing semantic meaning while maintaining the visual breadcrumb structure. The `aria-current="page"` attribute is the standard way to identify the current page in navigation components.

## JSX Usage

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

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

## Component Props

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

### children
- **Type**: `React.ReactNode`
- **Required**: No
- **Description**: Current page name or content to display

## Examples

### Example 1
```tsx
// Simple page name
<BreadcrumbPage>Current Page Name</BreadcrumbPage>
```
### Example 2
```tsx
// With icon and text
<BreadcrumbPage>
  <FileIcon className="mr-1" />
  Document.pdf
</BreadcrumbPage>
```
### Example 3
```tsx
// With custom styling
<BreadcrumbPage className="font-semibold text-primary">
  Important Page
</BreadcrumbPage>
```