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, { 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

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, { 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

        
            
          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} />

MDBScrollspySubList

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

Events


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.

        
            
        // .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

        
            
        $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;