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.

Section 2

Section 3 Subsection A

Subsection B

Section 4

Show code

HTML
CSS

        
            
            <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

Section 2

Section 3 Subsection A

Subsection B

Section 4

Show code

HTML
CSS

        
            
              <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

Show code

app.module.ts

        
            
          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.

Show code

HTML
TypeScript

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

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

Angular 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

Related resources

Scrollspy - API

Import

Inputs

MdbScrollspy

MdbScrollspyElement / MdbScrollspyWindow

MdbScrollspyLink

Outputs

MdbScrollspyDirective

CSS variables

SCSS variables