shadcn.io is not affiliated with official shadcn/ui
Breadcrumb Page Header Navbar Block for React Aria
An app page header: a Back button, the trail with the current page's title and a Draft badge, then behind a split divider who edited it and how long ago, and a Settings link.
Installation
Overview
A breadcrumb page header for React with React Aria, the bar above a record in a people-ops portal called Peoplewick. A Back button leads, then the trail (People, Hiring, Offers) in a nav labelled Breadcrumb, and it ends on the page you are on: its title, not a link, marked aria-current="page", with a Draft badge after it. The trail gives way by width instead of wrapping: the title truncates first, and below the md breakpoint the parent crumbs go and only the Back arrow, the title and the badge remain. A solid divider that meets the top rule sets off the end cell: an initials avatar, "Edited 4 min ago by Rin Kobayashi" (the age counts up while the page is open) and a Settings link with a tooltip. The block stays one bar high (56 pixels) and follows your theme. It's built from Breadcrumb, Badge, Avatar, Tooltip, Button and Guides. For an app whose pages are records inside a tree. The trail has no menu: the Dropdown Breadcrumb block owns that.
FAQ
How do I change the trail and the page's title?
Edit PEOPLE, HIRING and OFFERS (each a label and an href) and CURRENT, the page's own title, at the top of the file. The crumbs are written out in the markup, so a fourth level is one more BreadcrumbItem and separator. The last item is BreadcrumbPage, which is not a link and carries aria-current="page". The Back button's name is "Back to Offers": change its sr-only suffix when its target changes.
Is the edited time real?
It is the time the page has been open added to a starting age: "Edited 4 min ago" becomes 5 a minute after the page opens, and "1 h ago" after an hour. The starting age is the constant EDITED_MINUTES; give it the age of your record's real last edit, and the editor's name in the hidden text. Nothing is stored or sent, and the first render never depends on the clock, so the server and the browser agree.
What happens when the title is long?
The trail is one line that never wraps: the title takes the room that's left and ends in an ellipsis, the Draft badge and the end cell keep their size, and below the md breakpoint the parent crumbs are hidden so the title gets more. The full title is the page's own h1 further down, so nothing is lost for a screen reader.
How does it work with a keyboard and a screen reader?
Tab visits the Back link, then each crumb link, then the Settings link. The nav is named Breadcrumb, the current page is announced as the current page, and the Draft badge is plain text. The Settings link has the name "Page settings", and its tooltip shows on focus as well as on hover.
Does it work right to left?
Yes. The Back arrow and the crumb chevrons mirror, the divider stays between the two cells, and the hidden "by Rin Kobayashi" follows the age. The trail reads from the right and truncates at its end edge. Wrap the block in your direction provider so the tooltip follows the page.
What moves, and what about reduced motion?
Nothing moves on load. Links ease their colour on hover and the tooltip fades in; with reduced motion the colours change at once. The age changes its words in place with no animation. React Aria's breadcrumb draws the chevron after each parent crumb itself, so there is no separate separator element to restyle.