shadcn.io is not affiliated with official shadcn/ui
Breadcrumb Top Bar Banner Block for Solid
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 Solid with Ark 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 and the menu items are DropdownMenuItem; give them your router's link as the element they render, or an href for a plain page.
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.