shadcn.io is not affiliated with official shadcn/ui
Breadcrumb Skeleton Block for Radix UI
A team docs page whose breadcrumb is the reload: pressing Docs, Engineering or Runbooks loads that level's title, sentence and three lines while the chevrons and the frame stay.
Installation
Overview
Show a page while it loads, where moving up the trail is the reload, with this breadcrumb skeleton for React with Radix UI. A hairline frame with a plus mark on each corner holds a crumb band over a page from Filigree, a team docs library: the trail Docs / Engineering / Runbooks / Pager, then the page's title, one sentence and three lines. The chevrons between the crumbs and the frame are real from the first paint; the crumbs, the title, the sentence and the lines are Skeleton bars that become the data in the same cell. Pressing a crumb loads that level with its own typed title, sentence and lines, and the trail shortens to it; every level has three lines, so the panel never changes height. On a phone the middle crumbs fold into an ellipsis that steps up one level. It's built from Skeleton, Button and Guides, with a CSS entrance only. For documentation, file browsers and any page with a trail.
FAQ
What stays local, and how do I wire it to a real query?
Nothing is fetched. The four levels are typed in LEVELS, Load starts a 700 millisecond timer, and when it ends the phase becomes ready and the data swaps in; Reload goes back to the bars and in again. To wire it for real, delete the timer, the Load button and the polite line, and set data-state (loading or ready) and aria-busy on the region from your query's pending state, or use the bars as a Suspense fallback and render the real page when they arrive. The bars are derived from the same data as the real content, so keep one component for both. The crumbs would be links to your routes.
Does the panel keep its height while it loads?
Each bar and its data sit in one grid cell, so the larger of the two sets the cell's box and the swap changes nothing around it. The frame, the chevrons and the band's height are real in both phases, and the polite line reserves two lines, so the panel is exactly as tall before, during and after loading at every width. Every level has the same three lines, which keeps this true as the trail changes.
How does pressing a crumb reload the page?
Each crumb above the current page is a button that sets the open level and starts the wait again, so pressing another crumb while one is loading restarts the wait. The current crumb is plain text marked aria-current="page". In your app these are links to routes and the wait is your query for the page.
Is it accessible?
The region is marked busy while it loads and carries a screen-reader-only "Loading page…", and the polite line announces what loaded once. The bars are hidden from assistive technology and the layer that isn't showing is invisible, so it is neither read nor focusable. The pulse stops when the data is in, and under reduced motion there is no pulse, no spinner and no stagger: the swap is instant. The trail is a navigation named Breadcrumb in an ordered list, the chevrons are hidden from assistive technology, and the folded phone crumb is named for where it goes ("Up to Runbooks").