shadcn.io is not affiliated with official shadcn/ui
Gradient Border Navbar Block for Radix UI
A navbar with a soft hairline glint on the page rule under the current link, fainter on hover and focus, with no border added and nothing that moves, and a sheet menu on phones.
Installation
Overview
A navbar with a glint for React with Radix UI, for a typography foundry called Glintwell. The bar draws no border and no gradient border: the next block's top rule is its bottom edge. Instead the current link carries a soft hairline that fades in from clear and is brightest at its middle (bg-linear-to-r from-transparent via-foreground/60 to-transparent), lying on that edge over the rule and running a little wider than the link; hovering or focusing another link lights a fainter one under it. It's one solid line in the theme's foreground, and nothing moves. The wordmark leads, Typefaces, Custom work, Licensing and Journal follow, and a Buy a license Shine Button closes the row; below the md breakpoint a menu button opens a sheet from the top with the same links. It's built from Sheet, Guides, Shine Button and Button. For editorial, studio and portfolio sites that want a quiet mark of where you are.
FAQ
How is the glint drawn, and where does it sit?
It's the link's ::after: a 1-pixel line, absolutely placed on the bar's bottom edge (the link is h-9 in the h-16 bar, so 14 pixels below it), 1rem wider than the link on each side, with a horizontal gradient from clear through the foreground colour to clear. It has z-10, so it lies over the next block's top rule rather than under it. The current link shows it at 60% foreground, hover and focus show it at 25%. If you change the bar's height, change the -bottom-3.5 to half the difference between the bar and the link.
Is the current page marked by more than the glint?
Yes: the current link is foreground colour with a heavier label, and it has aria-current="page", so the mark isn't colour or a faint line alone, and a screen reader announces the current page. Mark yours with current: true in PAGES, or compute it from your router.
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); Tab walks the wordmark, the links, Buy a license and the menu button, and keyboard focus shows both the focus ring and the fainter glint. Buy a license 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 links fold: the wordmark, Buy a license and a menu button stay on the bar, and nothing wraps at 320 pixels. The glint belongs to the bar, so on a phone the sheet marks the current page with a tint and a dot instead. Focus moves into the sheet and stays there; Escape, the close button or choosing a link closes it, and focus goes back to the menu button.
What moves, and what happens with reduced motion?
Nothing moves on load or while you stay on a link. The hover and focus glint fades in over a fraction of a second, and a band of light sweeps across Buy a license once on hover and keyboard focus. With reduced motion the glint appears at once, the sheet appears without sliding and the light fades in where it stands.