Bootstrap 6 Scrollspy

Scrollspy

Automatically update Bootstrap navigation or list group components based on scroll position to indicate which link is currently active in the viewport.

On this page

How it works

Scrollspy toggles the .active class on anchor (<a>) elements when the element with the id referenced by the anchor’s href is scrolled into view. Scrollspy is best used in conjunction with a Bootstrap nav component or list group, but it will also work with any anchor elements in the current page. Here’s how it works.

To start, scrollspy requires two things: a navigation, list group, or a simple set of links, plus a scrollable container. The scrollable container can be the <body> or a custom element with a set height and overflow-y: scroll.
On the scrollable container, add data-coreui-spy="scroll" and data-coreui-target="#navId" where navId is the unique id of the associated navigation. If there is no focusable element inside the element, be sure to also include a tabindex="0" to ensure keyboard access.
As you scroll the “spied” container, an .active class is added and removed from anchor links within the associated navigation. Links must have resolvable id targets, otherwise they’re ignored. For example, a <a href="#home">home</a> must correspond to something in the DOM like <div id="home"></div>.
Target elements that are not visible will be ignored and their nav items won’t receive an .active class. Call refresh once they become visible.
Target ids are looked up with getElementById, so an id containing dots, colons, slashes or percent-encoded characters resolves without escaping.

Detection

The plugin watches every section with an IntersectionObserver and decides which one is current from a single rule: an invisible activation line drawn across the scroll container, topMargin below its top edge (12% of the container’s height by default). The result depends only on where the container is scrolled to, never on which direction it got there.

The active section is the lowest one whose top edge has moved up to or above the activation line. When several sections are visible at once, the one you have scrolled furthest into wins.
Between two sections nothing changes. While the gap between one section’s end and the next heading crosses the line, the previous link stays highlighted instead of the navigation going blank.
Above the first section the first link is active, so the navigation is never empty once the container has content.
At the bottom of the container the last link is active, even when the last section is too short for its top edge to ever reach the line.

Move the line with topMargin — a percentage of the container’s height or a pixel value, for example 96px to put it just below a sticky navbar. To take over the observer’s root box entirely, set rootMargin instead; when both are given, rootMargin wins. See Options.

Scrollable containers and keyboard access

If you’re making a scrollable container (other than the <body>), be sure to have a height set and overflow-y: scroll; applied to it—alongside a tabindex="0" to ensure keyboard access.

Examples

Scroll the area below the navbar and watch the active class change. Open the menu and watch the menu items be highlighted as well.

First heading

This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.

Second heading

Third heading

Fourth heading

Fifth heading

<nav id="navbar-example2" class="navbar bg-1 px-4 mb-4 rounded-2">
  <a class="navbar-brand" href="#">Navbar</a>
  <ul class="nav nav-pills">
    <li class="nav-item">
      <a class="nav-link" href="#scrollspyHeading1">First</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#scrollspyHeading2">Second</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#" role="button" data-coreui-toggle="menu" aria-expanded="false">Menu</a>
      <div class="menu">
        <a class="menu-item" href="#scrollspyHeading3">Third</a>
        <a class="menu-item" href="#scrollspyHeading4">Fourth</a>
        <hr class="menu-divider">
        <a class="menu-item" href="#scrollspyHeading5">Fifth</a>
      </div>
    </li>
  </ul>
</nav>
<div data-coreui-spy="scroll" data-coreui-target="#navbar-example2" data-coreui-smooth-scroll="true" class="scrollspy-example bg-1 p-4 rounded-2" tabindex="0">
  <h4 id="scrollspyHeading1">First heading</h4>
  <p>...</p>
  <h4 id="scrollspyHeading2">Second heading</h4>
  <p>...</p>
  <h4 id="scrollspyHeading3">Third heading</h4>
  <p>...</p>
  <h4 id="scrollspyHeading4">Fourth heading</h4>
  <p>...</p>
  <h4 id="scrollspyHeading5">Fifth heading</h4>
  <p>...</p>
</div>

Nested nav

Scrollspy also works with nested .navs. If a nested .nav is .active, its parents will also be .active. Scroll the area next to the navbar and watch the active class change.