Long documents need a map. The bounce sidebar is a plain list of links with one small dot beside the entry you are on, so the reader always knows where they are without a heavy highlight fighting the content.

When to use it

Reach for it on docs pages, changelogs and settings screens where the list is short enough to scan at a glance. For a dozen entries or more, group them under heading rows so the eye can jump between groups.

Why it exists

A selection that simply swaps colors is easy to miss. Movement draws the eye, and a marker that travels makes the change of section feel like a place you moved to rather than a state that flipped.

When the selection changes, the dot does not slide in a straight line. It bounces along a short arc, bowing out to the side and landing on the new entry, so every jump reads as a small, physical hop.

Arc strength

Short hops arc more and long hops arc less. The curve is scaled by the distance travelled, which keeps a jump across the whole list from swinging wide of the column.

Timing

Each hop takes a quarter of a second with an ease out, quick enough to keep up with a scrollspy while you scroll, and the first placement snaps into position without animating.

The component is an unordered list. Each entry is a button, or a link when you give it an href, and one absolutely positioned dot rides along the left edge of the list.

Heading rows

Pass an object with heading set to add a small uppercase label between groups. Headings take the dot color, are not selectable, and the marker hops straight over them.

Pixel snapping

The dot size and position are rounded to the device pixel grid, so it stays crisp on every screen instead of blurring between two rows of pixels.

Every entry is a real button or link, so Tab reaches each one and Enter or Space selects it. The active entry is marked with data-active for styling, and the dot itself is hidden from assistive technology.

Color

The dot is the only accent, so the entries keep the page text color and stay readable in both themes. Pass dotColor to match your brand; the heading rows pick it up too.

The bounce sidebar comes from Rare UI by Swami Malode and is part of UI Lab. The curved path comes from the arc helper in the motion library.

Further reading

See the hook sidebar and the proximity sidebar for two other takes on the same problem: showing where you are in a long page without taking over the layout.