shadcn.io is not affiliated with official shadcn/ui
Animated Underline Navbar Block for React Aria
A one-bar navbar for a design studio whose links draw a hairline underline in from the inline start on hover and focus and retract it toward the end, with the current page keeping its full line, using nothing but a CSS transform.
Installation
Overview
A navbar for React with React Aria whose only motion is a line under a link. The wordmark leads, five links sit start-aligned right after it (Work, Services, Studio, Journal and Contact), and Sign in and a Start free Shine Button close the row. Hover or focus a link and a hairline draws in under its label from the inline start; leave and it retracts toward the end. The page you're on, marked with aria-current="page", keeps its full line and a heavier label, so it isn't marked by colour alone. There's no script behind the line: each link's ::after is scaled from 0 to 1 with a CSS transform. Below the md breakpoint the links fold into a menu button that opens a sheet from the top with the same links and both actions. The bar is 56 pixels high, draws no bottom border (the next block's top rule is its bottom edge) and takes its rails and top rule from the Guides spine. It's built from Sheet, Guides, Shine Button and Button, with your theme's tokens for every colour. For studios, agencies, portfolios and editorial sites that want one quiet, precise hover.
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 phone sheet both read it, so they never drift apart. Compute current from your router (the link's href against the current path) and the line, the heavier label and aria-current="page" follow. Keep to five or six short labels: the bar has room for them beside the wordmark and the two actions from md up.
How does the underline draw in and retract?
The line is each link's ::after, one pixel high and scaled to 0 on the x axis. Its transform origin sits at the end, so when you leave it shrinks toward the end; on hover or keyboard focus the origin flips to the start and the scale goes to 1, so it grows from the start. In a right-to-left page the two origins swap, so the line still draws from the inline start. transition-transform runs 300 ms. The current page holds the scale at 1 with its origin unchanged.
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, Sign in and Start free; a link takes a focus ring and the same underline as hover, and the current page is announced as the current page. Nothing opens or traps focus in the bar, so it needs no per-library keys.
How does it work on a phone?
Below the md breakpoint the wordmark, Start free and a menu button stay on the bar, and nothing wraps at 320 pixels. The menu button says it opens a menu and opens a sheet from the top whose header lines up with the bar (the wordmark where it was, the close button where the menu button was), then the links, the current page tinted with a dot, and Sign in and Start free. 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.
Sign in and Start free render a link when they have an href.
What happens with reduced motion?
With reduced motion the line appears and disappears at once instead of drawing in; the colour change on hover is instant too. The sheet opens without sliding, and the band of light on Start free 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, its top rule falls on the window's top edge (or between it and a banner above it), and it draws no bottom border. To keep the bar in view while the page scrolls, add sticky top-0 z-40 bg-background/80 backdrop-blur to the header.