# Scrollspy Update Bootstrap navigation links as a scrollable region moves between sections. ```twig
{% for number in 1..3 %}

Section {{ number }}

Scroll this region to update the active navigation item.

The observed content stays inside its own scrollable container.

{% endfor %}
``` ## Installation ```shell php bin/console ux:install scrollspy --kit bootstrap ``` ## Usage ```twig

First section

Scrollspy activates the navigation link for the section currently in view.

Second section

Every link must point to a matching section identifier.
``` The `target` prop must select the navigation element, and every navigation link must point to the ID of a section inside the scrollable component. Bootstrap initializes Scrollspy through its data API. ## Accessibility The component adds `tabindex="0"` so a scrollable region without focusable children remains keyboard-accessible. Use meaningful link labels, unique section IDs, and a logical heading hierarchy inside the observed content. An active navigation style is a visual enhancement, not a substitute for headings or document structure. When smooth scrolling is enabled, Bootstrap respects `prefers-reduced-motion` through CSS. ## Examples ### Navbar Track sections from links inside a Bootstrap navbar. ```twig
{% for id, title in {first: 'First heading', second: 'Second heading', third: 'Third heading'} %}

Representative content for {{ title|lower }}. Keep scrolling to activate the next link.

{% endfor %}
``` ### Nested nav Activate both parent and nested navigation links for hierarchical content. ```twig
{% for id in ['1', '1-1', '1-2', '2'] %}

Item {{ id }}

Nested navigation activates parent and child links as their sections enter view.

{% endfor %}
``` ### List group Use a list group as the navigation target. ```twig
{% for number in 1..3 %}

Item {{ number }}

List group links work as Scrollspy navigation controls.

{% endfor %}
``` ### Simple anchors Track sections with lightweight anchor navigation and optional smooth scrolling. ```twig
{% for id, title in {first: 'First section', second: 'Second section', third: 'Third section'} %}

{{ title }}

Simple links receive the active class when this section becomes current.

{% endfor %}
``` ## API Reference ### `` | Prop | Type | Default | Description | |:-----|:-----|:--------|:------------| | `target` | `string` | - | The CSS selector of the navigation element controlled by Scrollspy. | | `height` | `string` | `'200px'` | The height of the scrollable region. | | `smoothScroll` | `boolean` | `false` | Whether link activation scrolls smoothly to its target section. | | `rootMargin` | `string\|null` | `null` | The optional Intersection Observer root margin. | | `threshold` | `string\|null` | `null` | The optional comma-separated Intersection Observer thresholds. | | Block | Description | |:------|:------------| | `content` | The sections observed by Scrollspy. |