Breadcrumb Dropdown Blueprint
Breadcrumb bar with the middle segment expanded into a sibling-project switcher panel showing the current item checked.
Breadcrumb bar with the middle segment expanded into a sibling-project switcher panel showing the current item checked.
Search blocks by description or jump to a page.
The source for every Application block is included with Basic and Pro. Pick a plan to copy the code.
Already purchased? Log in
Breadcrumb Dropdown Blueprint is a breadcrumb bar with one segment expanded into a sibling-project switcher, rendered as a static open blueprint. The trail reads Acme / Projects / Data pipeline v2 / Settings; the Projects crumb is shown highlighted with a ring, and below it a panel lists four sibling projects: Data pipeline v2 (current, with a check mark), Pipeline reliability review, Batch pipeline migration, and Real-time pipeline spike. A dashed placeholder below the breadcrumb shows where the settings content sits.
Breadcrumbs and siblings are two typed arrays. No Radix Popover state is used; the panel is absolutely positioned markup that screenshots correctly in the preview iframe.
Reach for this block in any deeply nested app where users frequently switch between sibling records at the same level, wired to a siblings-for-parent endpoint keyed on the parent id. Open the panel on the expandable crumb click.
A natural flow around it on an Application Pro page:
Before
After
One strong use is the project-level settings breadcrumb with sibling project switching. Other breadcrumb variants:
Tip: limit the sibling list to the five or six most recently visited records; a list of 40 projects is a search problem, not a switcher problem.