Scrollspy

React Bootstrap 5 Scrollspy component

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

Note: Read the API tab to find all available options and advanced customization

Basic example

Section 1

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore earum natus vel minima quod error maxime, molestias ut. Fuga dignissimos nisi nemo necessitatibus quisquam obcaecati et reiciendis quaerat accusamus numquam.

Section 2

Section 3 Subsection A

Subsection B

Section 4

Show code

JSX
SCSS

import React, { useRef } from 'react';
import { MDBCol, MDBContainer, MDBRow, MDBScrollspy, MDBScrollspyLink, MDBScrollspySubList } from 'mdb-react-ui-kit';

export default function App() {
  const section1 = useRef(null);
  const section2 = useRef(null);
  const section3 = useRef(null);
  const section4 = useRef(null);
  const sectionA = useRef(null);
  const sectionB = useRef(null);

  const containerRef = useRef(null);

  const subsections = [sectionA, sectionB];

  return (
    <MDBContainer>
      <MDBRow>
        <MDBCol md='8'>
          <div id='element' ref={containerRef} className='scrollspy-example'>
            <section ref={section1} id='section-1'>
              <h3>Section 1</h3>
              <p>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore earum natus vel minima quod error
                maxime, molestias ut. Fuga dignissimos nisi nemo necessitatibus quisquam obcaecati et reiciendis
                quaerat accusamus numquam.
              </p>
              <p>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore earum natus vel minima quod error
                maxime, molestias ut. Fuga dignissimos nisi nemo necessitatibus quisquam obcaecati et reiciendis
                quaerat accusamus numquam.
              </p>
            </section>
            <section ref={section2} id='section-2'>
              <h3>Section 2</h3>
              <p>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore earum natus vel minima quod error
                maxime, molestias ut. Fuga dignissimos nisi nemo necessitatibus quisquam obcaecati et reiciendis
                quaerat accusamus numquam.
              </p>
              <p>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore earum natus vel minima quod error
                maxime, molestias ut. Fuga dignissimos nisi nemo necessitatibus quisquam obcaecati et reiciendis
                quaerat accusamus numquam.
              </p>
            </section>
            <section ref={section3} id='section-3'>
              <h3>Section 3</h3>
              <p>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore earum natus vel minima quod error
                maxime, molestias ut. Fuga dignissimos nisi nemo necessitatibus quisquam obcaecati et reiciendis
                quaerat accusamus numquam.
              </p>
              <p>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore earum natus vel minima quod error
                maxime, molestias ut. Fuga dignissimos nisi nemo necessitatibus quisquam obcaecati et reiciendis
                quaerat accusamus numquam.
              </p>
              <section ref={sectionA} id='subsection-a'>
                <h3>Subsection A</h3>
                <p>
                  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore earum natus vel minima quod error
                  maxime, molestias ut. Fuga dignissimos nisi nemo necessitatibus quisquam obcaecati et reiciendis
                  quaerat accusamus numquam.
                </p>
                <p>
                  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore earum natus vel minima quod error
                  maxime, molestias ut. Fuga dignissimos nisi nemo necessitatibus quisquam obcaecati et reiciendis
                  quaerat accusamus numquam.
                </p>
              </section>
              <section ref={sectionB} id='subsection-b'>
                <h3>Subsection B</h3>
                <p>
                  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore earum natus vel minima quod error
                  maxime, molestias ut. Fuga dignissimos nisi nemo necessitatibus quisquam obcaecati et reiciendis
                  quaerat accusamus numquam.
                </p>
                <p>
                  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore earum natus vel minima quod error
                  maxime, molestias ut. Fuga dignissimos nisi nemo necessitatibus quisquam obcaecati et reiciendis
                  quaerat accusamus numquam.
                </p>
              </section>
            </section>
            <section ref={section4} id='section-4'>
              <h3>Section 4</h3>
              <p>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore earum natus vel minima quod error
                maxime, molestias ut. Fuga dignissimos nisi nemo necessitatibus quisquam obcaecati et reiciendis
                quaerat accusamus numquam.
              </p>
              <p>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore earum natus vel minima quod error
                maxime, molestias ut. Fuga dignissimos nisi nemo necessitatibus quisquam obcaecati et reiciendis
                quaerat accusamus numquam.
              </p>
            </section>
          </div>
        </MDBCol>

        <MDBCol md='4'>
          <MDBScrollspy container={containerRef}>
            <MDBScrollspyLink targetRef={section1}>Section 1</MDBScrollspyLink>
            <MDBScrollspyLink targetRef={section2}>Section 2</MDBScrollspyLink>
            <MDBScrollspyLink subsections={subsections} targetRef={section3}>
              Section 3
            </MDBScrollspyLink>
            <MDBScrollspySubList className='ps-3'>
              <MDBScrollspyLink targetRef={sectionA}>Subsection A</MDBScrollspyLink>
              <MDBScrollspyLink targetRef={sectionB}>Subsection B</MDBScrollspyLink>
            </MDBScrollspySubList>
            <MDBScrollspyLink targetRef={section4}>Section 4</MDBScrollspyLink>
          </MDBScrollspy>
        </MDBCol>
      </MDBRow>
    </MDBContainer>
  );
}

/* Styles required only for the example above */
.scrollspy-example {
  position: relative;
  height: 200px;
  overflow: auto;
}

Collapsible

Hides all subsections of unactive section. To use it, simply add collapsible property to the MDBScrollspyLink and MDBScrollspySubList.

Section 1

Section 2

Section 3 Subsection A

Subsection B

Section 4

Show code

JSX
SCSS

import React, { useRef } from 'react';
import { MDBCol, MDBContainer, MDBRow, MDBScrollspy, MDBScrollspyLink, MDBScrollspySubList } from 'mdb-react-ui-kit';

export default function App() {
  const collapseSection1 = useRef(null);
  const collapseSection2 = useRef(null);
  const collapseSection3 = useRef(null);
  const collapseSection4 = useRef(null);
  const collapseSectionA = useRef(null);
  const collapseSectionB = useRef(null);

  const collapseContainerRef = useRef(null);

  const collapseSubsections = [collapseSectionA, collapseSectionB];

  return (
    <MDBContainer>
      <MDBRow>
        <MDBCol md='8'>
          <div id='collapse' ref={collapseContainerRef} className='scrollspy-example'>
            <section ref={collapseSection1} id='section-collapse-1'>
              <h3>Section 1</h3>
              <p>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore earum natus vel minima quod error
                maxime, molestias ut. Fuga dignissimos nisi nemo necessitatibus quisquam obcaecati et reiciendis
                quaerat accusamus numquam.
              </p>
              <p>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore earum natus vel minima quod error
                maxime, molestias ut. Fuga dignissimos nisi nemo necessitatibus quisquam obcaecati et reiciendis
                quaerat accusamus numquam.
              </p>
            </section>
            <section ref={collapseSection2} id='section-collapse-2'>
              <h3>Section 2</h3>
              <p>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore earum natus vel minima quod error
                maxime, molestias ut. Fuga dignissimos nisi nemo necessitatibus quisquam obcaecati et reiciendis
                quaerat accusamus numquam.
              </p>
              <p>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore earum natus vel minima quod error
                maxime, molestias ut. Fuga dignissimos nisi nemo necessitatibus quisquam obcaecati et reiciendis
                quaerat accusamus numquam.
              </p>
            </section>
            <section ref={collapseSection3} id='section-collapse-3'>
              <h3>Section 3</h3>
              <p>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore earum natus vel minima quod error
                maxime, molestias ut. Fuga dignissimos nisi nemo necessitatibus quisquam obcaecati et reiciendis
                quaerat accusamus numquam.
              </p>
              <p>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore earum natus vel minima quod error
                maxime, molestias ut. Fuga dignissimos nisi nemo necessitatibus quisquam obcaecati et reiciendis
                quaerat accusamus numquam.
              </p>
              <section ref={collapseSectionA} id='subsection-collapse-a'>
                <h3>Subsection A</h3>
                <p>
                  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore earum natus vel minima quod error
                  maxime, molestias ut. Fuga dignissimos nisi nemo necessitatibus quisquam obcaecati et reiciendis
                  quaerat accusamus numquam.
                </p>
                <p>
                  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore earum natus vel minima quod error
                  maxime, molestias ut. Fuga dignissimos nisi nemo necessitatibus quisquam obcaecati et reiciendis
                  quaerat accusamus numquam.
                </p>
              </section>
              <section ref={collapseSectionB} id='subsection-collapse-b'>
                <h3>Subsection B</h3>
                <p>
                  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore earum natus vel minima quod error
                  maxime, molestias ut. Fuga dignissimos nisi nemo necessitatibus quisquam obcaecati et reiciendis
                  quaerat accusamus numquam.
                </p>
                <p>
                  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore earum natus vel minima quod error
                  maxime, molestias ut. Fuga dignissimos nisi nemo necessitatibus quisquam obcaecati et reiciendis
                  quaerat accusamus numquam.
                </p>
              </section>
            </section>
            <section ref={collapseSection4} id='section-collapse-4'>
              <h3>Section 4</h3>
              <p>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore earum natus vel minima quod error
                maxime, molestias ut. Fuga dignissimos nisi nemo necessitatibus quisquam obcaecati et reiciendis
                quaerat accusamus numquam.
              </p>
              <p>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore earum natus vel minima quod error
                maxime, molestias ut. Fuga dignissimos nisi nemo necessitatibus quisquam obcaecati et reiciendis
                quaerat accusamus numquam.
              </p>
            </section>
          </div>
        </MDBCol>

        <MDBCol md='4'>
          <MDBScrollspy container={collapseContainerRef}>
            <MDBScrollspyLink targetRef={collapseSection1}>Section 1</MDBScrollspyLink>
            <MDBScrollspyLink targetRef={collapseSection2}>Section 2</MDBScrollspyLink>
            <MDBScrollspyLink collapsible subsections={collapseSubsections} targetRef={collapseSection3}>
              Section 3
            </MDBScrollspyLink>
            <MDBScrollspySubList className='ps-3' collapsible={collapseSubsections}>
              <MDBScrollspyLink targetRef={collapseSectionA}>Subsection A</MDBScrollspyLink>
              <MDBScrollspyLink targetRef={collapseSectionB}>Subsection B</MDBScrollspyLink>
            </MDBScrollspySubList>
            <MDBScrollspyLink targetRef={collapseSection4}>Section 4</MDBScrollspyLink>
          </MDBScrollspy>
        </MDBCol>
      </MDBRow>>
    </MDBContainer>
  );
}

/* Styles required only for the example above */
.scrollspy-example {
  position: relative;
  height: 200px;
  overflow: auto;
}

How it works

Scrollspy has a few requirements to function properly:

Scrollspy requires position: relative; on the element you’re spying on, usually the <body>.
When spying on elements other than the <body>, be sure to have a height set and overflow-y: scroll; applied.
<MDBScrollspyLink> are required and must point to an previously selected scrollElement and contain active prop.

When successfully implemented, your nav or list group will update accordingly, moving the .active class from one item to the next based on their associated targets.

Scrollspy - API

Import

Show code

javascript

import {
  MDBScrollspy,
  MDBScrollspyLink,
  MDBScrollspySubList
} from 'mdb-react-ui-kit';

Properties

MDBScrollspy

Name	Type	Default	Description	Example
`container`	React.MutableRefObject<any>	`Window`	Specifies element to apply `MDBScrollspy`.	`<MDBScrollspy container={containerRef} />`
`offset`	number	`10`	Pixels to offset from top when calculating position of scroll.	`<MDBScrollspy offset={40} />`

MDBScrollspyLink

Name	Type	Default	Description	Example
`collapsible`	boolean	`false`	Makes list element collapsible.	`<MDBScrollspyLink collapsible />`
`subsections`	React.MutableRefObject<any>[]	`-`	List of element subsection items.	`<MDBScrollspyLink subsections={subsectionsArray} />`
`targetRef`	React.MutableRefObject<any>	`-`	Reference to spied element.	`<MDBScrollspyLink targetRef={sectionRef} />`

MDBScrollspySubList

Name	Type	Default	Description	Example
`collapsible`	boolean	`false`	Enables collapsible mode.	`<MDBScrollspySubList collapsible />`

Events

MDBScrollspyLink

Name	Type	Description
`onActivate`	(id?: string) => void	This event fires on the scroll element whenever a new item becomes activated by the scrollspy.

CSS variables

As part of MDB’s evolving CSS variables approach, scrollspy now use local CSS variables for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.

Scrollspy CSS variables are in different classes which belong to this component. To make it easier to use them, you can find below all of the used CSS variables.

Show code

// .nav-pills
// &.menu-sidebar
--#{$prefix}scrollspy-menu-sidebar-font-size: #{$scrollspy-menu-sidebar-font-size};
--#{$prefix}scrollspy-menu-sidebar-color: #{$scrollspy-menu-sidebar-color};
--#{$prefix}scrollspy-menu-sidebar-line-height: #{$scrollspy-menu-sidebar-line-height};
--#{$prefix}scrollspy-menu-sidebar-padding-x: #{$scrollspy-menu-sidebar-padding-x};
--#{$prefix}scrollspy-menu-sidebar-font-weight: #{$scrollspy-menu-sidebar-font-weight};
--#{$prefix}scrollspy-menu-sidebar-transition: #{$scrollspy-menu-sidebar-transition};
--#{$prefix}scrollspy-menu-sidebar-margin-y: #{$scrollspy-menu-sidebar-margin-y};

// .nav-link.active,
// .show > .nav-link
--#{$prefix}scrollspy-menu-sidebar-active-color: #{$scrollspy-menu-sidebar-active-color};
--#{$prefix}scrollspy-menu-sidebar-active-font-weight: #{$scrollspy-menu-sidebar-active-font-weight};
--#{$prefix}scrollspy-menu-sidebar-active-border-width: #{$scrollspy-menu-sidebar-active-border-width};
--#{$prefix}scrollspy-menu-sidebar-active-border-color: #{$scrollspy-menu-sidebar-active-border-color};

// .collapsible-scrollspy ~ .nav
--#{$prefix}scrollspy-collapsible-nav-transition-time: #{$scrollspy-collapsible-nav-transition-time};

SCSS variables

Show code

SCSS

$scrollspy-menu-sidebar-font-size: 0.8rem;
$scrollspy-menu-sidebar-color: #262626;
$scrollspy-menu-sidebar-line-height: 1.1rem;
$scrollspy-menu-sidebar-padding-x: 5px;
$scrollspy-menu-sidebar-font-weight: 400;
$scrollspy-menu-sidebar-transition: all 0.2s ease-in-out;
$scrollspy-menu-sidebar-margin-y: 3px;

$scrollspy-menu-sidebar-active-color: $primary;
$scrollspy-menu-sidebar-active-font-weight: 600;
$scrollspy-menu-sidebar-active-border-width: 0.125rem;
$scrollspy-menu-sidebar-active-border-color: $primary;

$scrollspy-collapsible-nav-transition-time: 0.5s;

Scrollspy

React Bootstrap 5 Scrollspy component

Basic example

Section 1

Section 2

Section 3

Subsection A

Subsection B

Section 4

Collapsible

Section 1

Section 2

Section 3

Subsection A

Subsection B

Section 4

How it works

Related resources

Scrollspy - API

Import

Properties

MDBScrollspy

MDBScrollspyLink

MDBScrollspySubList

Events

MDBScrollspyLink

CSS variables

SCSS variables