Segmented Control Navbar Block for React

Edit SEGMENTS at the top of the file: each entry has an id, a label, an icon, an href, a count and the unit that count counts. The tray's columns and the thumb come from this array: the thumb is sized for three segments (calc((100% - 0.5rem) / 3)), so for two or four, change the 3 in THUMB too. A count is example data; feed it from your own state.

The thumb is one absolutely placed element behind the segments. Its inline start is calc(0.25rem + var(--i) * (100% - 0.5rem) / 3), where --i is the current segment's index, set in a style attribute; a CSS transition on inset-inline-start slides it for 300 ms. The segments are equal width, so nothing needs measuring, and because it's an inline offset the thumb follows the page direction. The first render has no transition: the thumb only moves when you choose.

The segments are links in a nav landmark named Main, after the wordmark (a link home). Tab walks the wordmark, the three segments and Start free; Enter chooses and moves the thumb. A screen reader hears each segment's label, then its count and what it counts ("Recipes 48 saved recipes"), and the current one as the current page.

Below the sm breakpoint the segments show only their icon, the counts are hidden, the wordmark is just its icon and Start free is just Start, so the tray, the thumb and the action fit between the rails at 320 pixels. There is no menu button: all three destinations stay in reach. The accessible text of every segment doesn't change. Start free renders the link it's given with render, with nativeButton={false}.

With reduced motion the thumb jumps to the chosen segment at once. The band of light on Start free fades in where it stands instead of sweeping.

The demo's segments point at # and choosing one calls preventDefault and sets the current segment in state. With a real router, delete the onClick handler, compute the active segment from the current path and pass its index to --i.