Lumeo
Package LumeoTested Tier 3 · 37 testsView source ↗

Scrollspy

Monitors scroll position within a container and highlights the corresponding navigation link.

Installation

dotnet add package Lumeo

One-time app setup (AddLumeo(), CSS & JS) is covered in the installation guide.

Usage

@using Lumeo

<Scrollspy />
Tested Tier 3 · A11y + behavior
all components →
Render Behavior A11y Keyboard Scale E2E

37 tests across 10 files. Auto-generated from the test suite.

When to Use

  • Documentation pages with a table of contents that highlights the current section
  • Long-form content with sidebar navigation for section tracking
  • Single-page applications where scroll position drives navigation state
  • Landing pages with smooth-scrolling section links

Section 1

This is the content for Section 1. Scroll through the container to see the navigation links update automatically. Each section is tracked by the Scrollspy component, which detects which section is currently in view and highlights the corresponding link in the sidebar navigation.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Section 2

This is the content for Section 2. Scroll through the container to see the navigation links update automatically. Each section is tracked by the Scrollspy component, which detects which section is currently in view and highlights the corresponding link in the sidebar navigation.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Section 3

This is the content for Section 3. Scroll through the container to see the navigation links update automatically. Each section is tracked by the Scrollspy component, which detects which section is currently in view and highlights the corresponding link in the sidebar navigation.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Section 4

This is the content for Section 4. Scroll through the container to see the navigation links update automatically. Each section is tracked by the Scrollspy component, which detects which section is currently in view and highlights the corresponding link in the sidebar navigation.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Section 5

This is the content for Section 5. Scroll through the container to see the navigation links update automatically. Each section is tracked by the Scrollspy component, which detects which section is currently in view and highlights the corresponding link in the sidebar navigation.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Section 6

This is the content for Section 6. Scroll through the container to see the navigation links update automatically. Each section is tracked by the Scrollspy component, which detects which section is currently in view and highlights the corresponding link in the sidebar navigation.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Section 1

This is the content for Section 1. Click any navigation link above to smooth-scroll to that section, or scroll manually to see the active link update in real time.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Section 2

This is the content for Section 2. Click any navigation link above to smooth-scroll to that section, or scroll manually to see the active link update in real time.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Section 3

This is the content for Section 3. Click any navigation link above to smooth-scroll to that section, or scroll manually to see the active link update in real time.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Section 4

This is the content for Section 4. Click any navigation link above to smooth-scroll to that section, or scroll manually to see the active link update in real time.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Section 5

This is the content for Section 5. Click any navigation link above to smooth-scroll to that section, or scroll manually to see the active link update in real time.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Section 6

This is the content for Section 6. Click any navigation link above to smooth-scroll to that section, or scroll manually to see the active link update in real time.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Section 1

Offset shifts the activation line 80px down so a sticky header doesn't cover the section; Smooth="false" jumps instantly when you click a link.

Section 2

Offset shifts the activation line 80px down so a sticky header doesn't cover the section; Smooth="false" jumps instantly when you click a link.

Section 3

Offset shifts the activation line 80px down so a sticky header doesn't cover the section; Smooth="false" jumps instantly when you click a link.

Section 4

Offset shifts the activation line 80px down so a sticky header doesn't cover the section; Smooth="false" jumps instantly when you click a link.

Section 5

Offset shifts the activation line 80px down so a sticky header doesn't cover the section; Smooth="false" jumps instantly when you click a link.

API Reference

Scrollspy

Prop Type Default Description
ChildContent RenderFragment? — The tracked content, typically ScrollspyLink nav items and ScrollspySection content blocks.
Offset int 0 Pixel offset applied when deciding which section is active and when scrolling to a section (e.g. to account for a sticky header). Default 0.
Smooth bool true Animates scrolling to a section (via link click or a programmatic ActiveId change) instead of jumping instantly. Default true.
ActiveId string? — The currently active section's id. Two-way bindable via ActiveIdChanged, which also fires as the user scrolls or clicks a ScrollspyLink. Setting it programmatically scrolls to that section.
Class string? — Additional CSS classes merged onto the root container.
AdditionalAttributes Dictionary<string, object>? — Captures any unmatched attributes and applies them to the root container.

Events

ActiveIdChanged EventCallback<string> Raised whenever the active section changes, via scrolling, a link click, or an external ActiveId assignment.

ScrollspySection

Prop Type Default Description
Id* string "" The section's DOM id, matched against a Scrollspy's ActiveId and a Target. Required.
ChildContent RenderFragment? — The section's content.
Class string? — Additional CSS classes merged onto the section's <div>.
AdditionalAttributes Dictionary<string, object>? — Captures any unmatched attributes and applies them to the section's <div>.

ScrollspyLink

Prop Type Default Description
Target* string "" The id of the ScrollspySection this link scrolls to and highlights against. Required.
ChildContent RenderFragment? — The link's label content.
Class string? — Additional CSS classes merged onto the <button> element.
AdditionalAttributes Dictionary<string, object>? — Captures any unmatched attributes and applies them to the <button> element.

Related Components

  • ScrollArea — Custom scrollable container for content areas
  • NavigationMenu — Navigation menu for site-wide or section navigation
  • Affix — Pin elements to a fixed position during scroll

Cookies & consent

We use a minimal set of cookies to run the site and optionally measure anonymous usage to improve it. You choose what's on.Read the privacy policy.