shadcn.io is not affiliated with official shadcn/ui
Hover Highlight Navbar Block for Svelte
A navbar for a tile shop whose five centred links share one soft block that glides to the link you hover or focus and fades out when you leave, with the current page marked by a heavier label and a dot instead.
Installation
Overview
A navbar for Svelte with Ark UI whose links share a single highlight. The wordmark sits at the start, five links (Tiles, Surfaces, Samples, Trade and Showrooms) are centred in the bar, and a Get a quote Shine Button sits at the end. One soft block sits behind the links: hover or focus a link and it glides there, resizing to that link's width, and when you leave the list it fades out where it is. It's positioned from the link's measured box (its inline start and width), so it works in right-to-left pages, and the first time it appears it fades in over the link rather than travelling from nowhere. The current page isn't marked by the block: it has a heavier label and a dot before it, and aria-current="page". Below the md breakpoint the links fold into a menu button that opens a drawer from the bottom with the same links. The bar is 56 pixels high and takes its rails and top rule from the Guides spine; it draws no bottom border. It's built from Drawer, Guides, Shine Button and Button, with your theme's tokens for every colour. For shops, studios and catalogues with a handful of top-level sections.
FAQ
How do I change the links and the current page?
Edit PAGES at the top of the file: each entry is a label, an href and, for the page you're on, current: true. The bar and the drawer both read it. Compute current from your router and the dot, the heavier label and aria-current="page" follow. Five links fit the centred column comfortably; with more, move some into a menu.
How does the highlight find the link?
Each link reports itself on pointer enter and on focus: the block measures the link's box against the nav's (so its inline start comes out right in either text direction) and sets its offset and width. It transitions inset-inline-start, width and opacity; the first time it shows, the position changes with no transition so it appears on the link instead of travelling from the start, and when you leave it only fades. Moving between links glides.
How does it work with a keyboard and a screen reader?
The links sit in a nav landmark named Main, after the wordmark (a link home). Tab walks the wordmark, the five links and Get a quote; the highlight follows keyboard focus as it follows the pointer, and fades when focus leaves the list. The highlight is decorative and hidden from assistive technology; the current page is announced as the current page.
How does it work on a phone?
Below the md breakpoint the highlight isn't needed (there's no hover), so the links fold into a menu button beside Get a quote. It opens a drawer from the bottom: a handle, a Menu title and the same links, the current page tinted with a dot. Drag the drawer down, press Escape, tap the overlay or choose a link to close it; focus goes back to the menu button. Nothing wraps at 320 pixels.
The drawer's handle is Ark's grabber; each link is wrapped in the drawer's close part with asChild.
Get a quote's asChild receives its props: spread them onto your router's link.
What happens with reduced motion?
With reduced motion the highlight appears, moves and disappears at once, with no transition at all, and the drawer opens without sliding. The band of light on Get a quote fades in where it stands instead of sweeping.
How does it sit on the page, and can it stick to the top?
The navbar is the page's first block: its + marks and rails line up with every block under it, and it draws no bottom border, because the next block's top rule is its bottom edge. To keep the bar in view while the page scrolls, add sticky top-0 z-40 bg-background/80 backdrop-blur to the header.