shadcn.io is not affiliated with official shadcn/ui
Breadcrumb Top Bar Banner Block for React
A 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.
Installation
Overview
A breadcrumb bar for React with Base UI, the strip that tells a reader where they are in a deep site. One start-aligned line, 44 pixels tall, on the page's rails and under the spine's top rule: a home icon, then Documentation, Components and the current page, which is plain text and not a link. It's the catalog's Breadcrumb, so it's a real navigation landmark with an ordered list, separators that screen readers skip and aria-current="page" on the last crumb. Below the md breakpoint the two middle crumbs fold into an ellipsis button that opens a menu of them, so the line never wraps; the home link and the current page always stay. The bar is plain, with no tint and no dismiss: it's chrome, not news. It's built from Guides, Breadcrumb and Dropdown Menu with a Lucide icon and your theme's tokens for every colour. For documentation, help centres, shops and any site more than two levels deep.
FAQ
How do I change the trail?
Edit MIDDLE for the two crumbs that can fold (each is a label and an href) and CURRENT for the page you're on. Both the inline links and the menu read MIDDLE, so they can't disagree. For a longer trail, fold more crumbs into the same menu and show the first and last two on every screen: three visible crumbs fit at 320 pixels, and the current page is cut with an ellipsis when it's long.
How does the fold work without script?
Both versions are in the page and CSS picks one: the crumbs and their separators are max-md:hidden, the ellipsis item is md:hidden. A hidden crumb isn't in the accessibility tree either, so a screen reader hears the trail that's on screen. The menu is opened by the button and it reads the same two crumbs, as links.
Why isn't the current page a link?
It's where you are, so a link to it would only reload the page. The Breadcrumb marks it with aria-current="page", which screen readers announce as "current page", and it's the one crumb in a stronger weight.
How do I use real links or my router's link?
The crumbs are BreadcrumbLink, an a that takes an href; pass render={<Link href="…" />} to hand the navigation to your router. The menu items use render={<a href="…" />}: swap it the same way.
Is the ellipsis big enough to tap?
The visible button is 24 pixels, which fits the 44-pixel bar; on touch screens (pointer-coarse) an invisible area extends it to a comfortable target around it, and so for each link. Keyboard focus draws a ring on every crumb and on the button, and the menu opens from Enter, Space or the arrow keys.
Related
- Pro
Top Bar Banner
Top barsA slim announcement strip for a writing app's release: one centred line with the version, the news and an underlined link, and a ghost button that folds the strip away.
- Pro
Top Bar Nav Links Banner
Utility barsA quiet navigation strip for a product site: five section links separated by dots, with one underline that slides to the current page.
- Pro
Top Bar Tab Switch Banner
Utility barsA segmented control in a slim bar whose choice rewrites a one-line summary beside it.
- /Pro
Top Bar Search Banner
Utility barsA documentation search field in a slim bar: an icon, a labelled input and a slash key hint, with a popup of results that filters as you type.
- Pro
Keyboard Hint Banner
Top barsA one-line shortcut hint for a text editor, aligned to the start: three shortcuts read as a sentence, each a key cap and its verb, and a link to the full list.
- Pro
Saved Draft Top Bar Banner
Utility barsA top bar for a writing tool that reports its autosave with a green dot and a ticking time, and a Restore previous button that swaps in place to Restored with an Undo.