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, { useState, useEffect, useRef } from 'react';
import {
  MDBScrollspy,
  MDBScrollspyNavItem,
  MDBScrollspySection,
  MDBScrollspyNavLink,
  MDBScrollspyNavList,
  MDBRow,
  MDBCol,
  MDBContainer
} from 'mdb-react-ui-kit';

export default function App() {

  const [targets, setTargets] = useState<NodeListOf<HTMLElement>>();
  const [active, setActive] = useState(0);
  const scrollRef = useRef<HTMLElement>(null);

  useEffect(() => {
    setTargets(scrollRef.current?.querySelectorAll('.scrollspy-section'));
  }, []);

  return (
    <MDBContainer>
      <MDBRow>
        <MDBCol md='8'>
          <MDBScrollspy
            onElement
            ref={scrollRef}
            setActive={setActive}
            targets={targets}
            className='scrollspy-example'
          >
            <MDBScrollspySection>
              <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>
            </MDBScrollspySection>
            <MDBScrollspySection>
              <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>
            </MDBScrollspySection>
            <MDBScrollspySection>
              <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>
              <MDBScrollspySection>
                <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>
              </MDBScrollspySection>
              <MDBScrollspySection>
                <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>
              </MDBScrollspySection>
            </MDBScrollspySection>
            <MDBScrollspySection>
              <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>
            </MDBScrollspySection>
          </MDBScrollspy>
        </MDBCol>

        <MDBCol md='4'>
          <MDBScrollspyNavList className='flex-column nav-pills menu-sidebar sticky-top'>
            <MDBScrollspyNavItem>
              <MDBScrollspyNavLink
                active={active === 1}
                scrollElement={targets && targets[0]}
              >
                Section 1
              </MDBScrollspyNavLink>
            </MDBScrollspyNavItem>
            <MDBScrollspyNavItem>
              <MDBScrollspyNavLink
                active={active === 2}
                scrollElement={targets && targets[1]}
              >
                Section 2
              </MDBScrollspyNavLink>
            </MDBScrollspyNavItem>
            <MDBScrollspyNavItem>
              <MDBScrollspyNavLink
                active={active === 3 || active === 4 || active === 5}
                scrollElement={targets && targets[2]}
              >
                Section 3
              </MDBScrollspyNavLink>
              <MDBScrollspyNavList className='flex-column ps-3'>
                <MDBScrollspyNavItem>
                  <MDBScrollspyNavLink
                    active={active === 4}
                    scrollElement={targets && targets[3]}
                  >
                    Subsection A
                  </MDBScrollspyNavLink>
                </MDBScrollspyNavItem>
                <MDBScrollspyNavItem>
                  <MDBScrollspyNavLink
                    active={active === 5}
                    scrollElement={targets && targets[4]}
                  >
                    Subsection B
                  </MDBScrollspyNavLink>
                </MDBScrollspyNavItem>
              </MDBScrollspyNavList>
            </MDBScrollspyNavItem>
            <MDBScrollspyNavItem>
              <MDBScrollspyNavLink
                active={active === 6}
                scrollElement={targets && targets[5]}
              >
                Section 4
              </MDBScrollspyNavLink>
            </MDBScrollspyNavItem>
          </MDBScrollspyNavList>
        </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-scrollspy class to the <a> element of section you want to set to be collapsible.

Section 1

Section 2

Section 3 Subsection A

Subsection B

Section 4

Show code

JSX
SCSS

import React, { useState, useEffect, useRef } from 'react';
import {
  MDBScrollspy,
  MDBScrollspyNavItem,
  MDBScrollspySection,
  MDBScrollspyNavLink,
  MDBScrollspyNavList,
  MDBRow,
  MDBCol,
  MDBContainer
} from 'mdb-react-ui-kit';

export default function App() {

  const [targetsElement, setTargetsElement] = useState<NodeListOf<HTMLElement>>();
  const [activeElement, setActiveElement] = useState(0);
  const scrollRefElement = useRef<HTMLElement>(null);

  useEffect(() => {
    setTargetsElement(scrollRefElement.current?.querySelectorAll('.scrollspy-section'));
  }, []);

  return (
    <MDBContainer>
      <MDBRow>
        <MDBCol md='8'>
          <MDBScrollspy
            onElement
            ref={scrollRefElement}
            setActive={setActiveElement}
            targets={targetsElement}
            className='scrollspy-example'
          >
            <MDBScrollspySection>
              <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>
            </MDBScrollspySection>
            <MDBScrollspySection>
              <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>
            </MDBScrollspySection>
            <MDBScrollspySection>
              <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>
              <MDBScrollspySection>
                <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>
              </MDBScrollspySection>
              <MDBScrollspySection>
                <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>
              </MDBScrollspySection>
            </MDBScrollspySection>
            <MDBScrollspySection id='example-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>
            </MDBScrollspySection>
          </MDBScrollspy>
        </MDBCol>

        <MDBCol md='4'>
          <MDBScrollspyNavList className='flex-column nav-pills menu-sidebar sticky-top'>
            <MDBScrollspyNavItem>
              <MDBScrollspyNavLink
                active={activeElement === 1}
                scrollElement={targetsElement && targetsElement[0]}
              >
                Section 1
              </MDBScrollspyNavLink>
            </MDBScrollspyNavItem>
            <MDBScrollspyNavItem>
              <MDBScrollspyNavLink
                active={activeElement === 2}
                scrollElement={targetsElement && targetsElement[1]}
              >
                Section 2
              </MDBScrollspyNavLink>
            </MDBScrollspyNavItem>
            <MDBScrollspyNavItem>
              <MDBScrollspyNavLink
                active={activeElement === 3 || activeElement === 4 || activeElement === 5}
                scrollElement={targetsElement && targetsElement[2]}
                collapsible
              >
                Section 3
              </MDBScrollspyNavLink>
              <MDBScrollspyNavList
                active={activeElement === 3 || activeElement === 4 || activeElement === 5}
                collapsible
                className='flex-column ps-3'
              >
                <MDBScrollspyNavItem>
                  <MDBScrollspyNavLink
                    active={activeElement === 4}
                    scrollElement={targetsElement && targetsElement[3]}
                  >
                    Subsection A
                  </MDBScrollspyNavLink>
                </MDBScrollspyNavItem>
                <MDBScrollspyNavItem>
                  <MDBScrollspyNavLink
                    active={activeElement === 5}
                    scrollElement={targetsElement && targetsElement[4]}
                  >
                    Subsection B
                  </MDBScrollspyNavLink>
                </MDBScrollspyNavItem>
              </MDBScrollspyNavList>
            </MDBScrollspyNavItem>
            <MDBScrollspyNavItem>
              <MDBScrollspyNavLink
                active={activeElement === 6}
                scrollElement={targetsElement && targetsElement[5]}
              >
                Section 4
              </MDBScrollspyNavLink>
            </MDBScrollspyNavItem>
          </MDBScrollspyNavList>
        </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.
<MDBScrollspyNavLink> 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,
  MDBScrollspyNavItem,
  MDBScrollspySection,
  MDBScrollspyNavLink,
  MDBScrollspyNavList,
} from 'mdb-react-ui-kit';

Properties

MDBScrollspy

Name	Type	Default	Description	Example
`tag`	React.ComponentProps<any>	`'div'`	Defines tag of the `MDBScrollspy` element	`<MDBScrollspy tag="section" />`
`className`	string	`''`	Add custom class to `MDBScrollspy`	`<MDBScrollspy className="class" />`
`offset`	number	`10`	Pixels to offset from top when calculating position of scroll	`<MDBScrollspy offset={20} />`
`onElement`	boolean	`false`	Sets scrollspy on the element instead of `<body>`	`<MDBScrollspy onElement />`
`setActive`	React.Dispatch<React.SetStateAction<number>>		Defines the useState hook responsible for setting the active navigation element	`<MDBScrollspy setActive={setActive} />`
`targets`	NodeListOf<HTMLElement> \| HTMLElement[]	`[]`	Selected scrollspy section elements	`<MDBScrollspy targets={targets} />`
`ref`	React.Ref<any>		A reference to the `MDBScrollspy` component	`<MDBScrollspy ref={someRef} />`

MDBScrollspySection

Name	Type	Default	Description	Example
`tag`	React.ComponentProps<any>	`'div'`	Defines tag of the `MDBScrollspySection` element	`<MDBScrollspySection tag="section" />`
`className`	string	`''`	Adds a custom class to `MDBScrollspySection`	`<MDBScrollspySection className="class" />`
`customSelect`	string	`''`	Allows to specify custom section selector when using scrollspy in another scrollspy	`<MDBScrollspySection customSelect='-nav' />`
`ref`	React.Ref<any>		A reference to the `MDBScrollspySection` component	`<MDBScrollspySection ref={someRef} />`

MDBScrollspyNavList

Name	Type	Default	Description	Example
`tag`	React.ComponentProps<any>	`'ul'`	Defines tag of the `MDBScrollspyNavList` element	`<MDBScrollspyNavList tag="section" />`
`className`	string	`''`	Adds a custom class to `MDBScrollspyNavList`	`<MDBScrollspyNavList className="class" />`
`collapsible`	boolean	`false`	Enables collapse in the `MDBScrollspyNavList`	`<MDBScrollspyNavList collapsible />`
`active`	boolean	`false`	Defines an active state of the `MDBScrollspyNavList`	`<MDBScrollspyNavList active />`

MDBScrollspyNavItem

Name	Type	Default	Description	Example
`tag`	React.ComponentProps<any>	`'li'`	Defines tag of the `MDBScrollspyNavItem` element	`<MDBScrollspyNavItem tag="section" />`
`className`	string	`''`	Adds a custom class to `MDBScrollspyNavItem`	`<MDBScrollspyNavItem className="class" />`
`ref`	React.Ref<any>		A reference to the `MDBScrollspyNavItem` component	`<MDBScrollspyNavItem ref={someRef} />`

MDBScrollspyNavlink

Name	Type	Default	Description	Example
`tag`	React.ComponentProps<any>	`'a'`	Defines tag of the `MDBScrollspyNavlink` element	`<MDBScrollspyNavlink tag="h3" />`
`className`	string	`''`	Add custom class to `MDBScrollspyNavlink`	`<MDBScrollspyNavlink className="class" />`
`active`	boolean	`false`	Defines active state of the `MDBScrollspyNavlink`	`<MDBScrollspyNavlink active={active === 1} />`
`scrollElement`	HTMLElement		Defines the target of the `MDBScrollspyNavlink`	`<MDBScrollspyNavlink scrollElement={targets && targets[0]} />`
`collapsible`	boolean	`false`	Enables collapsing in the `MDBScrollspyNavlink`	`<MDBScrollspyNavlink collapsible />`
`ref`	React.Ref<any>		A reference to the `MDBScrollspyNavlink` component	`<MDBScrollspyNavlink ref={someRef} />`