Wavy Link Indicator
A small navigation study where one continuous SVG path keeps hover and current-page feedback connected.
- Category
- Navigation
- Year
- 2026
- Status
- Experiment
What it is
A compact active-state treatment for a small group of links.
The line belongs to the whole navigation, but only the section beneath the current or hovered link becomes visible. This keeps the feedback connected without adding a separate underline to every label.
Design decisions
The interaction stays light enough for frequent use.
One continuous path
The underline is a shallow SVG wave drawn through the full navigation width. It gives the group a shared visual rhythm without competing with the labels.
Measured geometry
A ResizeObserver measures each label and the navigation container. The visible segment remains aligned when text wraps, font metrics change, or the viewport resizes.
Immediate fallback
Reduced-motion preferences remove the travel while retaining the selected state. Keyboard focus receives the same indicator feedback as pointer hover.
Continue exploring
Another navigation experiment built around clear state changes.