Overview
The API follows a small compound pattern: list, item, link, page, and separator. Keep markup shallow and prefer tokens for spacing between items.
Common use cases
- E-commerce category → product trails.
- Admin consoles with nested settings routes.
- Docs sites with section and page context.
- Marketing sites linking back to primary hubs.
FAQ
Does the breadcrumb work with the Next.js App Router?
Yes. Use standard anchor hrefs or Next.js Link by composing your own link component inside BreadcrumbLink when you need client navigation.
How should I label the nav element?
The root nav defaults to aria-label="Breadcrumb". Override it when you localize strings or need a more specific name for assistive technologies.