shadcn.io is not affiliated with official shadcn/ui
Navbar Skeleton Block for Radix UI
A conference site navbar that loads in place: the mark and name stay while five CMS links and the Sign in and Register buttons become real controls, left to right.
Installation
Overview
Show a site navbar while its links load, with this navbar skeleton for React with Radix UI. A hairline frame with a plus mark on each corner holds one bar from Fermata, a conference ticketing site: the mark and name, five links typed as a CMS would send them (Programme, Speakers, Venue, Tickets, FAQ) and the Sign in and Register buttons. The mark and the name are real from the first paint; the links and the two buttons are Skeleton bars that become the real Button controls in the same cell, left to right, when you press Load. The links and buttons say they are not wired in this demo. Below a tablet the links hide and the mark and Sign in stay, with Register joining them from the small breakpoint. It's built from Skeleton, Button and Guides, with a CSS entrance only. For marketing sites, event pages and any navbar whose links come from a CMS.
FAQ
What stays local, and how do I wire it to a real query?
Nothing is fetched. The five links are typed in LINKS, 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 links when they arrive. The bars are derived from the same data as the real content, so keep one component for both.
Does the bar keep its size 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 mark and the name 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.
Why are the links loaded and not the brand?
The brand is part of your code, while the menu's labels and order come from a CMS and can change without a deploy. The bars stand for the part you cannot know in advance. If your links are static, render them as real buttons from the start and skip the bars.
Is it accessible?
The region is marked busy while it loads and carries a screen-reader-only "Loading navigation…", 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 bar is a navigation named for the site, the links are real buttons once loaded, and the layer that isn't showing is not focusable, so tabbing never lands on a hidden control.