# Segmented Nav

> A navigation track of ticks - pick one and it stretches into a labeled pill while its neighbors fade out with distance.

Every link is a tick, and the active one is the same element as its tick. There's no separate highlight sliding along the track. The tick stretches out into the pill: its width springs from 4px to `auto`, its height grows, and its corners widen. The label sits inside with overflow clipped, so it's revealed as the shape opens and cut off as the shape closes, blurring in and out on top of that.

The rest of the track reads off one number, each tick's distance from the active one. Neighbors are tall and bright, the next ones shorter and dimmer, and everything beyond settles into a faint stub. Since the widths animate frame by frame inside a flex row, the other ticks just get pushed along as the pill moves. Nothing has to measure positions or run a layout animation.

Hovering a tick opens it into the pill, so you can sweep across the row and read every label. While you're previewing, a small dot stays under the active tick, and when the cursor leaves the pill springs back to it. The keyboard works the same way. Focus lands on the active tab when the nav mounts, the arrow keys (plus Home and End) move focus and the preview along with it, and Enter commits, since it's just the native button click. A roving tabindex means Tab enters on the active tab instead of stepping through all seven, and each button carries its label for screen readers. One spring set on `MotionConfig` drives everything, which keeps the pill and the ticks settling in step, and it respects reduced motion.

## Source

- [components/crafts/segmented-nav/index.tsx](https://github.com/aviralj02/portfolio-v2/blob/main/components/crafts/segmented-nav/index.tsx)

---

HTML version: https://heyaviral.com/craft/segmented-nav · Site overview for agents: https://heyaviral.com/llms.txt