Dropdown Breadcrumb Navbar Block for React

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.

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". Base UI's menu bar moves between menus on its own. After you open a menu with the pointer, the first Left or Right can move focus to the next crumb without opening it: press the key again.

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.

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.

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 direction provider (the catalog's DirectionProvider) so the menus follow the page.

Nothing moves on load. A menu fades and grows in from its crumb, the chevron turns, and the drawer slides up from the bottom. With reduced motion the chevron turns at once and the drawer appears without sliding.