Navigation
NavArrows
A paired navigation control. Hovering an arrow extends it the way it will take you.
Back disabled
Usage
<NavArrows
size="md"
stretch={4}
intensity="normal"
spring="smooth"
/>How the motion works
The head advances by the full spring value while the tail retreats at a third of it, so the shaft lengthens instead of the glyph sliding. The path geometry is recomputed each frame rather than applying scaleX — a transform would distort the stroke width, whereas redrawing keeps the line weight constant as it extends.
useSpringStateusePress
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| onBack / onForward | () => void | — | Activation handlers. |
| backDisabled / forwardDisabled | boolean | false | Disable either direction. |
| stretch | number | 4 | Shaft extension on hover, in SVG units. |
| backLabel / forwardLabel | string | — | Accessible names for each arrow. |