ScrollSpy

  1. Base UI
  2. ScrollSpy

Horizontal section navigation

A simple pill menu tracks the visible section.

01

Start with a clear overview

Give the team a shared understanding of the project. Define the outcome, gather the useful context, and decide what success looks like.

A good overview makes the next decision easier.
02

Plan the next milestone

Break the work into useful steps. Choose a realistic milestone, assign clear owners, and keep dependencies visible to everyone.

Focus on the next outcome rather than a long list of activity.
03

Keep delivery moving

Share progress as the work develops. Capture decisions, review feedback, and resolve questions before they interrupt the next stage.

Small, timely updates help the team stay aligned.
04

Review what you learned

Look back at the outcome and the process. Keep what worked, record what could improve, and use the learning in your next project.

A thoughtful review turns experience into better decisions.

List-group navigation

A vertical index alongside a scrollable guide.

01

Start with a clear overview

Give the team a shared understanding of the project. Define the outcome, gather the useful context, and decide what success looks like.

A good overview makes the next decision easier.
02

Plan the next milestone

Break the work into useful steps. Choose a realistic milestone, assign clear owners, and keep dependencies visible to everyone.

Focus on the next outcome rather than a long list of activity.
03

Keep delivery moving

Share progress as the work develops. Capture decisions, review feedback, and resolve questions before they interrupt the next stage.

Small, timely updates help the team stay aligned.
04

Review what you learned

Look back at the outcome and the process. Keep what worked, record what could improve, and use the learning in your next project.

A thoughtful review turns experience into better decisions.

Nested project index

Grouped links connect the main stages with their supporting details.

01

Project overview

Give the team a shared understanding of the project. Define the outcome, gather the useful context, and decide what success looks like.

A good overview makes the next decision easier.
02

Research & discovery

Gather useful observations from the people who will use your product. Find the patterns that explain what the project needs to solve.

Bring the findings into your project brief.
03

Prototype & validation

Explore the most useful ideas in a lightweight prototype. Test the key interactions and use feedback to refine your approach.

Validate the important assumptions early.
04

Keep delivery moving

Share progress as the work develops. Capture decisions, review feedback, and resolve questions before they interrupt the next stage.

Small, timely updates help the team stay aligned.
05

Review what you learned

Look back at the outcome and the process. Keep what worked, record what could improve, and use the learning in your next project.

A thoughtful review turns experience into better decisions.

Reading progress

Section tracking with a live indication of reading progress.

Guide progress0%
01

Start with a clear overview

Give the team a shared understanding of the project. Define the outcome, gather the useful context, and decide what success looks like.

A good overview makes the next decision easier.
02

Plan the next milestone

Break the work into useful steps. Choose a realistic milestone, assign clear owners, and keep dependencies visible to everyone.

Focus on the next outcome rather than a long list of activity.
03

Keep delivery moving

Share progress as the work develops. Capture decisions, review feedback, and resolve questions before they interrupt the next stage.

Small, timely updates help the team stay aligned.
04

Review what you learned

Look back at the outcome and the process. Keep what worked, record what could improve, and use the learning in your next project.

A thoughtful review turns experience into better decisions.

Compact numbered steps

Short labels keep a small navigation bar easy to scan.

01

Start with a clear overview

Give the team a shared understanding of the project. Define the outcome, gather the useful context, and decide what success looks like.

A good overview makes the next decision easier.
02

Plan the next milestone

Break the work into useful steps. Choose a realistic milestone, assign clear owners, and keep dependencies visible to everyone.

Focus on the next outcome rather than a long list of activity.
03

Keep delivery moving

Share progress as the work develops. Capture decisions, review feedback, and resolve questions before they interrupt the next stage.

Small, timely updates help the team stay aligned.
04

Review what you learned

Look back at the outcome and the process. Keep what worked, record what could improve, and use the learning in your next project.

A thoughtful review turns experience into better decisions.

Documentation index

A familiar table of contents for practical reference material.

ON THIS PAGE
01

Start with a clear overview

Give the team a shared understanding of the project. Define the outcome, gather the useful context, and decide what success looks like.

A good overview makes the next decision easier.
02

Plan the next milestone

Break the work into useful steps. Choose a realistic milestone, assign clear owners, and keep dependencies visible to everyone.

Focus on the next outcome rather than a long list of activity.
03

Keep delivery moving

Share progress as the work develops. Capture decisions, review feedback, and resolve questions before they interrupt the next stage.

Small, timely updates help the team stay aligned.
04

Review what you learned

Look back at the outcome and the process. Keep what worked, record what could improve, and use the learning in your next project.

A thoughtful review turns experience into better decisions.