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.

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

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.

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 3

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.

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.

Subsection A

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.

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.

Subsection B

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.

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 4

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.

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.


          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

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.

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

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.

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 3

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.

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.

Subsection A

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.

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.

Subsection B

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.

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 4

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.

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.


          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


        import { 
          MDBScrollspy,
          MDBScrollspyNavItem,
          MDBScrollspySection,
          MDBScrollspyNavLink,
          MDBScrollspyNavList, 
        } from 'mdb-react-ui-kit';
      

Properties

MDBScrollspy

Name Type Default Description Example
tag String '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 Function - Defines the useState hook responsible for setting the active navigation element <MDBScrollspy setActive={setActive} />
targets Array [] Selected scrollspy section elements <MDBScrollspy targets={targets} />

MDBScrollspySection

Name Type Default Description Example
tag String 'div' Defines tag of the MDBScrollspySection element <MDBScrollspySection tag="section" />
className String '' Add custom class to MDBScrollspySection <MDBScrollspySection className="class" />
customSelect string '' Allows to specify custom section selector when using scrollspy in another scrollspy <MDBScrollspySection customSelect='-nav' />

MDBScrollspyNavList

Name Type Default Description Example
tag String 'ul' Defines tag of the MDBScrollspyNavList element <MDBScrollspyNavList tag="section" />
className String '' Add custom class to MDBScrollspyNavList <MDBScrollspyNavList className="class" />

MDBScrollspyNavItem

Name Type Default Description Example
tag String 'li' Defines tag of the MDBScrollspyNavItem element <MDBScrollspyNavItem tag="section" />
className String '' Add custom class to MDBScrollspyNavItem <MDBScrollspyNavItem className="class" />