# Scrollspy Source: https://lumeo.nativ.sh/components/scrollspy # Scrollspy Monitors scroll position within a container and highlights the corresponding navigation link. ## Installation .NET CLI PackageReference Lumeo CLI dotnet add package Lumeo One-time app setup (`AddLumeo()`, CSS & JS) is covered in the [installation guide](docs/introduction). ## Usage @using Lumeo ## 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 Preview Code Vertical Scrollspy Section 1Section 2Section 3Section 4Section 5Section 6 ### 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. Preview Code Horizontal Nav Section 1Section 2Section 3Section 4Section 5Section 6 ### 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. ## 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 \- Callback invoked when the active section changes. Class string? null Additional CSS classes. AdditionalAttributes Dictionary? 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? 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? null Additional HTML attributes. ## Related Components - [ScrollArea](/components/scroll-area) — Custom scrollable container for content areas - [NavigationMenu](/components/navigation-menu) — Navigation menu for site-wide or section navigation - [Affix](/components/affix) — Pin elements to a fixed position during scroll