shadcn.io is not affiliated with official shadcn/ui
Glassmorphism Navbar Block for Ark UI
A frosted rectangular navbar panel inset in the page column, lying over a band of slowly drifting dots and soft mesh so the blur is visible, with a drawer menu on phones.
Installation
Overview
A glass navbar for React with Ark UI, for a photo-editing suite called Prismveil. The bar is a rounded rectangle, a frosted panel (backdrop-blur-xl bg-background/70 with a ring for its edge), inset in the page column over a 112-pixel band of texture: a soft mesh of the theme's foreground tones and a field of dots whose wave drifts slowly across it. The dots stay sharp around the panel and melt into the glass behind it, which is what makes the blur visible. The wordmark leads, Editor, Presets, Gallery and Pricing follow, and Sign in and a Try it free Shine Button close the row; below the md breakpoint a menu button opens a drawer from the bottom with the links and both actions. It's built from Mesh Gradient, Dot Pattern, Drawer, Guides, Shine Button and Button. For creative tools and media sites whose header sits over a textured or photographic page.
FAQ
Can I put a photo or another background behind it?
Yes. The band is an aria-hidden layer behind the panel (the mesh and the dots inside the -z-10 wrapper): swap it for an image, a video or a gradient and keep the panel. The panel needs something with detail behind it to look like glass, so a flat page colour shows no blur. The wrapper's mask fades the band out toward its foot, so the bar's bottom edge, which is the next block's top rule, isn't cut by a hard edge.
Does the text stay readable over the texture?
The panel is 70% page colour, blurred, and the mesh is held to a quarter of its strength in foreground tones with no hue, so the links keep their contrast in light and dark and in every preset. If you put a busier image behind it, raise the panel to bg-background/80 or lower the image's strength rather than darkening the links.
How does it work with a keyboard and a screen reader?
The links sit in a nav named Main after the wordmark (a link home), the current page is aria-current="page", and Tab walks the wordmark, the links, Sign in, Try it free and the menu button. The band is hidden from assistive technology and takes no pointer or focus. Try it free takes asChild with the link inside, so it can be your router's link.
How does it work on a phone?
Below the md breakpoint the wordmark, Try it free and a menu button stay in the panel. The button opens a drawer from the bottom with a grabber, the four links (the current page tinted and dotted), then Sign in and Try it free. Focus moves into the drawer and stays there; Escape, a swipe down, a tap outside it or choosing a link closes it, and focus goes back to the menu button.
What moves, and what happens with reduced motion?
The mesh drifts and a diagonal wave crosses the dots, both so slowly you barely see them move, and a band of light sweeps across Try it free once on hover and keyboard focus. With reduced motion the mesh and the dots rest where they start, the drawer appears without sliding and the light fades in where it stands. The dots don't react to the pointer.