Scrollspy

Vue Bootstrap 5 Scrollspy

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

TypeScript

        
            
            <template>
              <MDBRow>
                <MDBCol md="8">
                  <div id="scrollspy" class="scrollspy-example">
                    <section 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>
                      <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 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>
                      <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 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>
                      <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 id="example-sub-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 id="example-sub-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 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>
                    </section>
                  </div>
                </MDBCol>
                <MDBCol md="4">
                  <div class="sticky-top">
                    <ul class="nav flex-column nav-pills menu-sidebar" v-mdb-scrollspy="{ container: 'scrollspy' }">
                      <li class="nav-item">
                        <a class="nav-link" href="#example-1">Section 1</a>
                      </li>
                      <li class="nav-item">
                        <a class="nav-link" href="#example-2">Section 2</a>
                      </li>
                      <li class="nav-item">
                        <a class="nav-link" href="#example-3">Section 3</a>
                        <ul class="nav flex-column ps-3">
                          <li class="nav-item">
                            <a class="nav-link" href="#example-sub-A">Subsection A</a>
                          </li>
                          <li class="nav-item">
                            <a class="nav-link" href="#example-sub-B">Subsection B</a>
                          </li>
                        </ul>
                      </li>
                      <li class="nav-item">
                        <a class="nav-link" href="#example-4">Section 4</a>
                      </li>
                    </ul>
                  </div>
                </MDBCol>
              </MDBRow>
            </template>

        
            
            <script>
              import { mdbScrollspy, MDBRow, MDBCol } from "mdb-vue-ui-kit";

              export default {
                components: {
                  MDBRow,
                  MDBCol
                },
                directives: {
                  mdbScrollspy
                }
              };
            </script>

        
            
            <script setup lang="ts">
              import { mdbScrollspy as vMdbScrollspy, MDBRow, MDBCol } from "mdb-vue-ui-kit";
            </script>

        
            
            <style>
              /* Styles required only for the example above */
              .scrollspy-example {
                position: relative;
                height: 200px;
                overflow: auto;
              }
            </style>

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

TypeScript

        
            
            <template>
              <MDBRow>
                <MDBCol md="8">
                  <div id="scrollspy-collapsible" class="scrollspy-example-collapsible">
                    <section id="example-1-collapsible">
                      <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 id="example-2-collapsible">
                      <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 id="example-3-collapsible">
                      <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 id="example-sub-A-collapsible">
                        <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 id="example-sub-B-collapsible">
                        <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 id="example-4-collapsible">
                      <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">
                  <div class="sticky-top">
                    <ul class="nav flex-column nav-pills menu-sidebar" v-mdb-scrollspy="{ container: 'scrollspy-collapsible' }">
                      <li class="nav-item">
                        <a class="nav-link" href="#example-1-collapsible">Section 1</a>
                      </li>
                      <li class="nav-item">
                        <a class="nav-link" href="#example-2-collapsible">Section 2</a>
                      </li>
                      <li class="nav-item">
                        <a class="nav-link collapsible-scrollspy" href="#example-3-collapsible">Section 3</a>
                        <ul class="nav flex-column ps-3">
                          <li class="nav-item">
                            <a class="nav-link " href="#example-sub-A-collapsible">Subsection A</a>
                          </li>
                          <li class="nav-item">
                            <a class="nav-link" href="#example-sub-B-collapsible">Subsection B</a>
                          </li>
                        </ul>
                      </li>
                      <li class="nav-item">
                        <a class="nav-link" href="#example-4-collapsible">Section 4</a>
                      </li>
                    </ul>
                  </div>
                </MDBCol>
              </MDBRow>
            </template>

        
            
            <script>
              import { mdbScrollspy, MDBRow, MDBCol } from "mdb-vue-ui-kit";

              export default {
                components: {
                  MDBRow,
                  MDBCol
                },
                directives: {
                  mdbScrollspy
                }
              };
            </script>

        
            
            <script setup lang="ts">
              import { mdbScrollspy as vMdbScrollspy, MDBRow, MDBCol } from "mdb-vue-ui-kit";
            </script>

        
            
            <style>
              /* Styles required only for the example above */
              .scrollspy-example-collapsible {
                position: relative;
                height: 200px;
                overflow: auto;
              }
            </style>

How it works

Scrollspy has a few requirements to function properly:

It must be used on a Bootstrap nav component or list group.
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.
Anchors (<a>) are required and must point to an element with that id.

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

script

        
            
          <script>
            import {
              mdbScrollspy
            } from 'mdb-vue-ui-kit';
          </script>

Properties

Property	Type	Default	Description
`async`	Boolean	`false`	Enables recalculating the directive's data based on loading value.
`callback`	String		Name of the method which will be called with the active link's index once it changes.
`container`	[String, Object]	`window`	The directive selects the element with the given ID as the reference container. By default its value is set to `window`.
`loading`	Boolean	`false`	Option available with the async modifier - chnaging its value from true to false will trigger recalculating scrollspy.
`offset`	Number	`0`	Sets an offset from top when calculating position of the scroll.

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

Vue Bootstrap 5 Scrollspy

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

How it works

Related resources

Scrollspy - API

Import

Properties

CSS variables

SCSS variables