shadcn.io is not affiliated with official shadcn/ui
Dropdown Breadcrumb Navbar Block for Vue
A 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.
Installation
Overview
A dropdown breadcrumb for Vue with Ark UI, the page header of a content-management system called Orchardline. The wordmark leads, then a menu bar of three crumbs (a collection, a section and an entry: Journal, Orchard notes, Autumn pruning). Each crumb is a button that opens a list of its siblings with the current one checked, so you can jump sideways at any level; choosing one rewrites that crumb and puts the crumbs after it back to their first, and a polite status says where you are now. The last crumb is the page itself (aria-current="page"). A View on site link ends the bar. Below the md breakpoint the trail keeps its last two crumbs and an ellipsis button opens a drawer from the bottom with the first crumb's list and a link home. The menus and the drawer open over the page, so the block stays one bar high (56 pixels). It's built from Menubar, Drawer, Button and Guides, with your theme's tokens for every colour. For content tools, file browsers and any app whose pages sit in a tree.
FAQ
How do I put in my own pages?
Edit TREE at the top of the file: a name and optional children, three levels deep (collection, section, entry). The menus, the checked item, the reset of the crumbs after a choice and the drawer's list all read from it, so nothing else changes. The block keeps where you are in path (an index per level); read it from your router instead, and make pick navigate. Nothing is stored or sent here, and the MDX of your page decides what a choice loads.
How does it work with a keyboard and a screen reader?
The crumbs are the items of a menu bar inside a nav named Breadcrumb. Tab enters the bar; Left and Right move between the crumbs, and with a menu open they open the next crumb's menu, as a menu bar does. Down or Enter opens a menu, the arrow keys move through its items, Enter chooses and Escape closes it with focus back on the crumb. Each list says which item is checked, and the last crumb carries aria-current="page".
Ark's menus don't share a menu bar, so one handler on the nav moves between the crumbs (and between open menus) with Left and Right, flipped in right-to-left pages.
How does it work on a phone?
Below the md breakpoint the wordmark and the first crumb leave the bar, and an ellipsis button named "Show collections" takes their place. It opens a drawer from the bottom with a grabber, a title, the first crumb's list (the current one tinted and marked aria-current), a link to the home page and a Close button. Choosing a collection closes the drawer, rewrites the trail and puts focus back on the ellipsis button. The two crumbs that stay are still menus: they open under themselves and never past the screen's edge. Nothing wraps at 320 pixels; a long name is cut with an ellipsis.
Where does focus go after a choice?
Back to the crumb you chose from, with the keyboard or the pointer, and from the drawer to its ellipsis button. Some menu libraries leave focus on the page after a pointer choice, so the block puts it back after a short pause.
Does it work right to left?
Yes. The trail reads from the right, the chevrons between crumbs mirror, the menus open under the crumb's start edge and the checks sit at the start of their items. The wordmark is artwork and keeps its direction. Wrap the block in your locale provider so the menus follow the page.