Navigation / The visual dictionary

Scrollspy.

Navigation that updates its highlighted section as the reader scrolls.

Also calledactive section trackingscroll-aware navigation

See it in context

UI illustration

What it is

Navigation that updates its highlighted section as the reader scrolls. Track the current content section and reflect it in an associated navigation list without moving the page unexpectedly.

When to use it

Use it to preserve orientation in a long document.

Know the difference

Scrollspy observes scrolling; clicking an anchor actively changes the scroll position.

Across platforms

Web

Web implementations often observe section visibility; account for sticky headers when choosing the active section.

Go to the source

Primary documentation for the pattern and its platform conventions.

Material Design — Understanding navigation

FROM NAME TO NEXT BUILD

Put it into words.

Choose a device and an effect, then copy the whole description.

Building forAnimation effectBrowse the effect library

Create a scrollspy. Track the current content section and reflect it in an associated navigation list without moving the page unexpectedly. Use it to preserve orientation in a long document. Make it responsive and accessible, and follow the selected platform's interaction conventions.

Your copied description includes the component, device context, and selected animation timing.

See it in context

What it is

When to use it

Know the difference

Across platforms

Web

Go to the source

You might also mean…

Table of contents

Anchor link

Sticky header