shadcn.io is not affiliated with official shadcn/ui
Breadcrumb Page Header Navbar Block for React
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 Base UI, 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.
Related
- Pro
Dropdown Breadcrumb Navbar
Page headersA page header whose breadcrumb is a menu bar: every crumb opens a list of its siblings with the current one checked, Left and Right move between the crumb menus, and a phone keeps the last two crumbs and opens the rest in a drawer.
- Pro
Settings Header Navbar
Two rowsA two-row settings header: the page title and one real edit (a Weekly digest switch) with Discard and Save that wake up when it changes, and a row of section tabs where the dirty one carries a dot and a spoken note.
- Pro
Condensed Density Navbar
Cells and splitsA slim 40 pixel app bar in cells on shared hairlines, with two live counts and a density control (Compact or Comfortable) that changes text size and gaps while the bar keeps its height.
- Pro
Breadcrumb Top Bar Banner
Utility barsA 44-pixel top bar for a documentation site: a home icon and a real breadcrumb trail, whose middle crumbs fold into an ellipsis menu below the md breakpoint.
- Pro
Breadcrumb FAQ
NavigationA drill-down help centre for a mobile carrier: four topic cells in a framed card, a breadcrumb bar, and each topic's questions behind a click.
- Pro
Breadcrumb Footer
Sitemaps and trailsA breadcrumb footer for a CI service's docs: a trail band ending on the current page, three link groups in hairline columns and a foot band with the wordmark and policies.