Top Bar Nav Links Banner Block for React

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.

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.

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.

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.

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.