Breadcrumb
Where this page sits.
Default
With the middle collapsed into an ellipsis, for a deep trail.
The trail from the front page to here. The last item is the page you are on, so it is not a link — and it is marked as current, which is what a screen reader announces.
Installation
npx philcn@latest add breadcrumbThe file is written into your project. It is yours from then on — change it as you like.
Props
| Prop | Type | What it does |
|---|---|---|
| BreadcrumbLink.href | string | Where this step goes. |
| BreadcrumbLink.asChild | boolean | Hands the styling to your own link component — Next's, or your router's. |
Types are read from the library itself, so this table cannot describe an option the code no longer has.
Worth knowing
- The separators are hidden from screen readers: a list of links read out with a slash between each pair helps nobody.