Scrollspy

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

        
            
            <div class="row">
              <div class="col-md-8">
                <div class="scrollspy-example scrollspy-container">
                  <section mdbScrollspyElement="scrollspy" id="example-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>
                  </section>
                  <section mdbScrollspyElement="scrollspy" id="example-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>
                  </section>
                  <section mdbScrollspyElement="scrollspy" id="example-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>
                    <section mdbScrollspyElement="scrollspy-2" id="example-5">
                      <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>
                    </section>
                    <section mdbScrollspyElement="scrollspy-2" id="example-6">
                      <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>
                    </section>
                  </section>
                  <section mdbScrollspyElement="scrollspy" 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>
                  </section>
                </div>
              </div>

              <div class="col-md-4">
                <div id="scrollspy" class="sticky-top">
                  <ul mdbScrollspy="scrollspy" class="nav flex-column nav-pills menu-sidebar">
                    <li class="nav-item">
                      <a mdbScrollspyLink="example-1" class="nav-link">Section 1</a>
                    </li>
                    <li class="nav-item">
                      <a mdbScrollspyLink="example-2" class="nav-link">Section 2</a>
                    </li>
                    <li class="nav-item">
                      <a mdbScrollspyLink="example-3" class="nav-link">Section 3</a>
                      <ul mdbScrollspy="scrollspy-2" class="nav flex-column ps-3">
                        <li class="nav-item">
                          <a mdbScrollspyLink="example-5" class="nav-link">Subsection A</a>
                        </li>
                        <li class="nav-item">
                          <a mdbScrollspyLink="example-6" class="nav-link">Subsection B</a>
                        </li>
                      </ul>
                    </li>
                    <li class="nav-item">
                      <a mdbScrollspyLink="example-4" class="nav-link">Section 4</a>
                    </li>
                  </ul>
                </div>
              </div>
            </div>
          
        
    
        
            
            .scrollspy-example {
              position: relative;
              height: 200px;
              overflow: auto;
            }
          
        
    

Collapsible

Hides all subsections of unactive section. To use it, simply add [collapsible]="true" input to the ul element with mdbScrollspy directive of section you want to 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.

        
            
              <div class="row">
                <div class="col-md-8">
                  <div class="scrollspy-example scrollspy-container">
                    <section mdbScrollspyElement="scrollspy" id="example-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>
                    </section>
                    <section mdbScrollspyElement="scrollspy" id="example-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>
                    </section>
                    <section mdbScrollspyElement="scrollspy" id="example-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>
                      <section mdbScrollspyElement="scrollspy-2" id="example-5">
                        <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>
                      </section>
                      <section mdbScrollspyElement="scrollspy-2" id="example-6">
                        <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>
                      </section>
                    </section>
                    <section mdbScrollspyElement="scrollspy" 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>
                    </section>
                  </div>
                </div>
  
                <div class="col-md-4">
                  <div id="scrollspy" class="sticky-top">
                    <ul mdbScrollspy="scrollspy" class="nav flex-column nav-pills menu-sidebar">
                      <li class="nav-item">
                        <a mdbScrollspyLink="example-1" class="nav-link">Section 1</a>
                      </li>
                      <li class="nav-item">
                        <a mdbScrollspyLink="example-2" class="nav-link">Section 2</a>
                      </li>
                      <li class="nav-item">
                        <a mdbScrollspyLink="example-3" class="nav-link">Section 3</a>
                        <ul mdbScrollspy="scrollspy-2" class="nav flex-column ps-3" [collapsible]="true">
                          <li class="nav-item">
                            <a mdbScrollspyLink="example-5" class="nav-link">Subsection A</a>
                          </li>
                          <li class="nav-item">
                            <a mdbScrollspyLink="example-6" class="nav-link">Subsection B</a>
                          </li>
                        </ul>
                      </li>
                      <li class="nav-item">
                        <a mdbScrollspyLink="example-4" class="nav-link">Section 4</a>
                      </li>
                    </ul>
                  </div>
                </div>
              </div>
            
        
    
        
            
              .scrollspy-example {
                position: relative;
                height: 200px;
                overflow: auto;
              }
            
        
    

Scrollspy - API


Import

        
            
          import { MdbScrollspyModule } from 'mdb-angular-ui-kit/scrollspy';
          …
          @NgModule ({
            ...
            imports: [MdbScrollspyModule],
            ...
          })
        
        
    

Inputs

MdbScrollspy

Name Type Default Description
collapsible boolean false Makes section collapsible

MdbScrollspyElement / MdbScrollspyWindow

Name Type Default Description
offset number 10 Pixels to offset from top when calculating position of scroll.

MdbScrollspyLink

Name Type Default Description
scrollIntoView boolean false Scroll to the section assigned to a given link.

Outputs

MdbScrollspyDirective

Name Type Description
activeLinkChange EventEmitter<any> This event fires on the scroll element whenever a new item becomes activated by the scrollspy.
        
            
              <ul mdbScrollspy="scrollspy" (activeLinkChange)="onActiveLinkChange($event)" class="nav flex-column nav-pills menu-sidebar">
                ...
              </ul>
            
        
    
        
            
          import { Component } from '@angular/core';

          @Component({
            selector: 'app-root',
            templateUrl: './app.component.html',
            styleUrls: ['./app.component.scss'],
          })
          export class AppComponent {
            onActiveLinkChange(link: any): void {
              console.log('active link', link);
            }
          }          
          
        
    

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;