Breadcrumb Component
Accessible React breadcrumb navigation with icons, custom separators, SPA click handlers and automatic ellipsis collapsing for deep paths — built with Tailwind CSS.
Import
1import { Breadcrumb } from "@neuctra/ui";Basic Usage
Collapsed Deep Paths
maxItems keeps long paths short: the first crumb stays, the middle collapses into an ellipsis.
SPA Navigation
Omit href and pass onClick to integrate with react-router or Next.js without full page loads.
Props
All available props for the Breadcrumb component.
| Prop | Type | Default | Description |
|---|---|---|---|
| items | BreadcrumbItem[] | — | Trail entries (required); last item is the current page |
| items[].label | ReactNode | — | Crumb text |
| items[].href | string | — | Renders an <a>; omit for a button |
| items[].icon | ReactNode | — | Leading icon |
| items[].onClick | (e) => void | — | SPA navigation handler |
| separator | ReactNode | chevron | Custom separator between crumbs |
| maxItems | number | — | Collapse the middle into an ellipsis beyond this count |
| size | "sm" | "md" | "md" | Text and icon scale |
| listClassName | string | — | Styles the ordered list (<ol>) wrapping all crumbs |
| itemClassName | string | — | Styles each crumb's list item (<li>) |
| activeItemClassName | string | — | Styles the current-page crumb (last item) |
| triggerClassName | string | — | Styles each clickable crumb's link/button |
| iconClassName | string | — | Styles a crumb's leading icon wrapper |
| labelClassName | string | — | Styles a crumb's label text |
| separatorClassName | string | — | Styles the separator between crumbs |
| ellipsisClassName | string | — | Styles the collapsed-middle ellipsis item |
Accessibility
- Wrapped in <nav aria-label="Breadcrumb"> with an ordered list.
- The current page carries aria-current="page" and is not a link.
- Separators and the ellipsis are aria-hidden.
Frequently Asked Questions
How do I install and import the Breadcrumb component?
Install the @neuctra/ui package, then import it with: import { Breadcrumb } from "@neuctra/ui";
What variants and sizes does Breadcrumb support?
Breadcrumb supports sizes: sm, md. Use the variant and size props to switch between them, or pass a className to layer on custom Tailwind CSS classes.
Is the Breadcrumb component accessible?
Breadcrumb is built with semantic HTML and standard ARIA attributes, and supports keyboard navigation and focus states out of the box, so it works well with screen readers and keyboard-only users.