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 />

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

Vertical Scrollspy

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.

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.

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.

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.

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.

Horizontal Nav

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.

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.

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.

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.

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.

API Reference

Scrollspy

Prop	Type	Default	Description
ChildContent	RenderFragment?	null	The scrollspy container content (links and sections).
Offset	int	0	Pixel offset from the top when determining the active section.
Smooth	bool	true	Enables smooth scrolling when navigating to sections.
ActiveId	string?	null	The currently active section ID. Use with @bind-ActiveId.
ActiveIdChanged	EventCallback<string>	-	Callback invoked when the active section changes.
Class	string?	null	Additional CSS classes.
AdditionalAttributes	Dictionary<string, object>?	null	Additional HTML attributes.

ScrollspySection

Prop	Type	Default	Description
Id	string	""	Unique section identifier. Required.
ChildContent	RenderFragment?	null	The section content.
Class	string?	null	Additional CSS classes.
AdditionalAttributes	Dictionary<string, object>?	null	Additional HTML attributes.

ScrollspyLink

Prop	Type	Default	Description
Target	string	""	ID of the section to scroll to. Required.
ChildContent	RenderFragment?	null	The link label content.
Class	string?	null	Additional CSS classes.
AdditionalAttributes	Dictionary<string, object>?	null	Additional HTML attributes.

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

Scrollspy

Installation

Usage

When to Use

Section 1

Section 2

Section 3

Section 4

Section 5

Section 6

Section 1

Section 2

Section 3

Section 4

Section 5

Section 6

API Reference

Scrollspy

ScrollspySection

ScrollspyLink

Related Components