Breadcrumb
Basic Usage
Loading...
Installation
pnpm add @corew500/uiUsage
import { Breadcrumb } from "@corew500/ui/breadcrumb"
<Breadcrumb>Content</Breadcrumb>CMS Integration
Loading...
API Reference
Accessibility
Focus Management
- Links have visible focus states with color transition on hover/focus
Screen Readers
- - Root nav element has `aria-label="breadcrumb"` for screen reader identification
- Current page uses `aria-current="page"` to indicate active location
- Current page is marked as `aria-disabled="true"` since it's not interactive
- Separators use `role="presentation"` and `aria-hidden="true"` to be ignored by assistive tech
- BreadcrumbEllipsis includes visually hidden "More" text for screen readers
Additional
- Uses semantic ordered list (ol) for proper hierarchy indication
Localization
Translatable Content
- - Pass pre-translated strings to BreadcrumbLink and BreadcrumbPage children
- The hidden "More" text in BreadcrumbEllipsis is hardcoded; override via sr-only span if needed
- No internal i18n dependencies; all visible text should be localized at application layer