Tailwind Scrollspy component

Responsive Scrollspy built with Tailwind CSS. Highlight where the user is by updating links based on scroll position. Works perfectly with smooth scroll.


Basic example

Scrollspy is a popular type of intra-page navigation that tracks specific page elements and shows which element the user's screen is currently on. This is useful when you have a lot of content on your site and you want to organize it or send the user directly to the content they are interested in.

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.

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

      <div class="grid grid-cols-3">
        <div class="col-span-2">
          <div data-bs-spy="scroll" data-bs-target="#scrollspy1" data-bs-offset="200" class="scrollspy-example">
            <section id="example-1">
              <h3 class="text-xl font-semibold pt-5 pb-3">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 class="text-xl font-semibold pt-5 pb-3">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 class="text-xl font-semibold pt-5 pb-3">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 class="text-xl font-semibold pt-5 pb-3">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 class="text-xl font-semibold pt-5 pb-3">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 class="text-xl font-semibold pt-5 pb-3">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>
        </div>

        <div>
          <!-- Scrollspy -->
          <div id="scrollspy1" class="sticky-top pl-3 text-sm">
            <ul class="nav nav-pills menu-sidebar">
              <li class="py-1">
                <a class="nav-link" href="#example-1">Section 1</a>
              </li>
              <li class="py-1">
                <a class="nav-link" href="#example-2">Section 2</a>
              </li>
              <li class="py-1">
                <a class="nav-link" href="#example-3">Section 3</a>
                <ul class="nav flex-column pl-3">
                  <li class="py-1">
                    <a class="nav-link" href="#example-sub-A">Subsection A</a>
                  </li>
                  <li>
                    <a class="nav-link" href="#example-sub-B">Subsection B</a>
                  </li>
                </ul>
              </li>
              <li class="py-1">
                <a class="nav-link" href="#example-4">Section 4</a>
              </li>
            </ul>
          </div>
          <!-- Scrollspy -->
        </div>
      </div>
      
        
    

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.


If you are looking for more advanced options, try Bootstrap Scrollspy from MDBootstrap.