shadcn.io is not affiliated with official shadcn/ui
Top Bar Nav Links Banner Block for Ark UI
A quiet navigation strip for a product site: five section links separated by dots, with one underline that slides to the current page.
Installation
Overview
A secondary navigation strip for React with Ark UI, the kind that sits above a page's content and says where you are. Five links for Tamaracklane (Overview, Features, Pricing, Docs and Changelog) sit start-aligned in a real nav, separated by small dots drawn in CSS, and one underline sits under the current page. Choose another link and the underline slides to it: its offset and width come from that link's measured box, and a CSS transition moves it, which doesn't run under reduced motion. The current link is in medium weight and carries aria-current="page". The strip is 44 pixels tall on a desktop, wraps to a second line on a phone, and sits on the page's drafting lines: two rails and a rule along its top edge with a plus mark on each crossing. It's built from Guides with your theme's tokens for every colour, and it follows the theme. For documentation chapters, settings sections and any secondary navigation that shouldn't look like a full navbar.
FAQ
How do I change the links and the current page?
Edit LINKS at the top of the file: each link has an id, a label and an href. The demo marks a link as current when you choose it and stops the browser from following href, so you can see the underline move. In your app, remove that click handler and set the current link from your route instead: pass the matching id as the initial value of the active state, or compare the router's path in the link's aria-current.
How does the underline slide without a motion library?
After each render the block measures the chosen link's box against the nav's and puts those three numbers (the offset from the inline start, the top and the width) on one absolutely placed bar. A CSS transition on exactly those properties moves it, and motion-reduce turns the transition off so it jumps. A ResizeObserver measures again when the strip changes size, so the bar stays under its link when the page resizes or the links wrap. The first measurement doesn't animate: the bar simply appears where it belongs.
Does it work in right-to-left pages?
Yes. The bar is placed with the logical inline-start property and the measurement is made from the nav's inline start, which is the right edge in a right-to-left page, so it sits under the right link and slides the right way. The links read from the right, and the dot separators, drawn in CSS, follow them.
What happens on a phone?
The links wrap to a second line at most (at 320 pixels four links fit on the first line and the last one drops to the second), the dots are dropped in favour of a wider gap so none starts a line, and the underline follows its link to the second line because it measures the link's own top. The strip grows from 44 to about 68 pixels; nothing scrolls sideways.
How is it made accessible?
The links are a list inside a nav labelled with the product's name, so screen readers announce a navigation landmark. Every link is a real anchor that Tab reaches in order and shows a focus ring on; the current page is aria-current="page" rather than only a style. The underline is decoration and is hidden from assistive technology.