Tailwind CSS Scrollspy

Use responsive tabs component with helper examples for horizontal and vertical tabs, tabs ui colors, custom classes & more. Free download, open-source license.

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.

Section 2

Section 3 Subsection A

Subsection B

HTML
javascript

        
            
      <div class="grid grid-cols-3">
        <div class="col-span-2">
          <div
            data-twe-spy="scroll"
            data-twe-target="#scrollspy1"
            data-twe-offset="0"
            class="relative h-48 overflow-auto">
            <section id="example-1">
              <h3 class="pb-3 pt-5 text-xl font-semibold">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>
              <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="pb-3 pt-5 text-xl font-semibold">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="pb-3 pt-5 text-xl font-semibold">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="pb-3 pt-5 text-xl font-semibold">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="pb-3 pt-5 text-xl font-semibold">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="pb-3 pt-5 text-xl font-semibold">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 ps-3 text-sm">
            <ul data-twe-nav-list-ref>
              <li class="py-1">
                <a
                  data-twe-nav-link-ref
                  data-twe-nav-link-active
                  class="bg-transparent px-[5px] text-neutral-600 shadow-none dark:text-neutral-200"
                  href="#example-1"
                  >Section 1</a
                >
              </li>
              <li class="py-1">
                <a
                  data-twe-nav-link-ref
                  class="bg-transparent px-[5px] text-neutral-600 shadow-none dark:text-neutral-200"
                  href="#example-2"
                  >Section 2</a
                >
              </li>
              <li class="py-1">
                <a
                  data-twe-nav-link-ref
                  class="bg-transparent px-[5px] text-neutral-600 shadow-none dark:text-neutral-200"
                  href="#example-3"
                  >Section 3</a
                >
                <ul data-twe-nav-list-ref class="ps-3">
                  <li class="py-1">
                    <a
                      data-twe-nav-link-ref
                      class="bg-transparent px-[5px] text-neutral-600 shadow-none dark:text-neutral-200"
                      href="#example-sub-A"
                      >Subsection A</a
                    >
                  </li>
                  <li>
                    <a
                      data-twe-nav-link-ref
                      class="bg-transparent px-[5px] text-neutral-600 shadow-none dark:text-neutral-200"
                      href="#example-sub-B"
                      >Subsection B</a
                    >
                  </li>
                </ul>
              </li>
              <li class="py-1">
                <a
                  data-twe-nav-link-ref
                  class="bg-transparent px-[5px] text-neutral-600 shadow-none dark:text-neutral-200"
                  href="#example-4"
                  >Section 4</a
                >
              </li>
            </ul>
          </div>
          <!-- Scrollspy -->
        </div>
      </div>

        
            
      // Initialization for ES Users
      import {
        ScrollSpy,
        initTWE,
      } from "tw-elements";
      
      initTWE({ ScrollSpy });

Hey there 👋 we're excited about TW elements and want to see it grow! If you enjoy it, help the project grow by sharing it with your peers. Every share counts, thank you!

Collapsible

Hides all subsections of unactive section. To use it, simply add data-twe-collapsible-scrollspy-ref attribute to the <a> element of section you want to set to be collapsible. If you want the collapse to be animated, add transition-all duration-300 classes to the <ul> element.

Section 1

Section 2

Section 3 Subsection A

Subsection B

Section 4

Section 1
Section 2
Section 3
- Subsection A
- Subsection B
Section 4

HTML
javascript

        
            
      <div class="grid grid-cols-3">
        <div class="col-span-2">
          <div
            data-twe-spy="scroll"
            data-twe-target="#scrollspy-collapsible"
            data-twe-offset="0"
            class="relative h-48 overflow-auto">
            <section id="example-1-collapsible">
              <h3 class="pb-3 pt-5 text-xl font-semibold">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>
              <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 class="pb-3 pt-5 text-xl font-semibold">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 class="pb-3 pt-5 text-xl font-semibold">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 class="pb-3 pt-5 text-xl font-semibold">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 class="pb-3 pt-5 text-xl font-semibold">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 class="pb-3 pt-5 text-xl font-semibold">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="scrollspy-collapsible" class="sticky-top ps-3 text-sm">
            <ul data-twe-nav-list-ref>
              <li class="py-1">
                <a
                  data-twe-nav-link-ref
                  data-twe-nav-link-active
                  class="bg-transparent px-[5px] text-[#4b5563] shadow-none transition-all dark:text-neutral-200"
                  href="#example-1-collapsible"
                  >Section 1</a
                >
              </li>
              <li class="py-1">
                <a
                  data-twe-nav-link-ref
                  class="bg-transparent px-[5px] text-[#4b5563] shadow-none transition-all dark:text-neutral-200"
                  href="#example-2-collapsible"
                  >Section 2</a
                >
              </li>
              <li class="py-1">
                <a
                  data-twe-nav-link-ref
                  data-twe-collapsible-scrollspy-ref
                  class="bg-transparent px-[5px] text-[#4b5563] shadow-none transition-all dark:text-neutral-200"
                  href="#example-3-collapsible"
                  >Section 3</a
                >
                <ul
                  data-twe-nav-list-ref
                  class="ps-3 transition-all duration-300">
                  <li class="py-1">
                    <a
                      data-twe-nav-link-ref
                      class="bg-transparent px-[5px] text-[#4b5563] shadow-none transition-all dark:text-neutral-200"
                      href="#example-sub-A-collapsible"
                      >Subsection A</a
                    >
                  </li>
                  <li>
                    <a
                      data-twe-nav-link-ref
                      class="bg-transparent px-[5px] text-[#4b5563] shadow-none transition-all dark:text-neutral-200"
                      href="#example-sub-B-collapsible"
                      >Subsection B</a
                    >
                  </li>
                </ul>
              </li>
              <li class="py-1">
                <a
                  data-twe-nav-link-ref
                  class="bg-transparent px-[5px] text-[#4b5563] shadow-none transition-all dark:text-neutral-200"
                  href="#example-4-collapsible"
                  >Section 4</a
                >
              </li>
            </ul>
          </div>
          <!-- Scrollspy -->
        </div>
      </div>

        
            
      // Initialization for ES Users
      import {
        ScrollSpy,
        initTWE,
      } from "tw-elements";
      
      initTWE({ ScrollSpy });

Smooth scroll

Add scroll-smooth class to the wrapper to make the scroll animation smooth.

Section 1

Section 2

Section 3 Subsection A

Subsection B

Section 4

Section 1
Section 2
Section 3
- Subsection A
- Subsection B
Section 4

HTML
javascript

        
            
      <div class="grid grid-cols-3">
        <div class="col-span-2">
          <div
            data-twe-spy="scroll"
            data-twe-target="#scrollspy-smooth"
            data-twe-offset="0"
            class="relative h-48 overflow-auto scroll-smooth">
            <section id="example-1-smooth">
              <h3 class="pb-3 pt-5 text-xl font-semibold">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>
              <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-smooth">
              <h3 class="pb-3 pt-5 text-xl font-semibold">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-smooth">
              <h3 class="pb-3 pt-5 text-xl font-semibold">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-smooth">
                <h3 class="pb-3 pt-5 text-xl font-semibold">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-smooth">
                <h3 class="pb-3 pt-5 text-xl font-semibold">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-smooth">
              <h3 class="pb-3 pt-5 text-xl font-semibold">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="scrollspy-smooth" class="sticky-top ps-3 text-sm">
            <ul data-twe-nav-list-ref>
              <li class="py-1">
                <a
                  data-twe-nav-link-ref
                  data-twe-nav-link-active
                  class="bg-transparent px-[5px] text-[#4b5563] shadow-none transition-all dark:text-neutral-200"
                  href="#example-1-smooth"
                  >Section 1</a
                >
              </li>
              <li class="py-1">
                <a
                  data-twe-nav-link-ref
                  class="bg-transparent px-[5px] text-[#4b5563] shadow-none transition-all dark:text-neutral-200"
                  href="#example-2-smooth"
                  >Section 2</a
                >
              </li>
              <li class="py-1">
                <a
                  data-twe-nav-link-ref
                  class="bg-transparent px-[5px] text-[#4b5563] shadow-none transition-all dark:text-neutral-200"
                  href="#example-3-smooth"
                  >Section 3</a
                >
                <ul data-twe-nav-list-ref class="ps-3">
                  <li class="py-1">
                    <a
                      data-twe-nav-link-ref
                      class="bg-transparent px-[5px] text-[#4b5563] shadow-none transition-all dark:text-neutral-200"
                      href="#example-sub-A-smooth"
                      >Subsection A</a
                    >
                  </li>
                  <li>
                    <a
                      data-twe-nav-link-ref
                      class="bg-transparent px-[5px] text-[#4b5563] shadow-none transition-all dark:text-neutral-200"
                      href="#example-sub-B-smooth"
                      >Subsection B</a
                    >
                  </li>
                </ul>
              </li>
              <li class="py-1">
                <a
                  data-twe-nav-link-ref
                  class="bg-transparent px-[5px] text-[#4b5563] shadow-none transition-all dark:text-neutral-200"
                  href="#example-4-smooth"
                  >Section 4</a
                >
              </li>
            </ul>
          </div>
          <!-- Scrollspy -->
        </div>
      </div>

        
            
      // Initialization for ES Users
      import {
        ScrollSpy,
        initTWE,
      } from "tw-elements";
      
      initTWE({ ScrollSpy });

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.
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 data-twe-nav-link-active attribute from one item to the next based on their associated targets.

Name	Type	Default	Description
`offset`	number	`10`	Pixels to offset from top when calculating position of scroll.
`method`	string	`'auto'`	Finds which section the spied element is in. `auto` will choose the best method to get scroll coordinates. `offset` will use the `Element.getBoundingClientRect(),` method to get scroll coordinates. `position,` will use the `HTMLElement.offsetTop,` and `HTMLElement.offsetLeft,` properties to get scroll coordinates.
`target`	string or DOM element	`true`	Specifies element to apply Scrollspy plugin.

Method	Description	Example
`refresh`	When using scrollspy in conjunction with adding or removing of elements from the DOM, you’ll need to call the refresh method.	`instance.refresh()`
`dispose`	Destroys an element’s tab.	`instance.dispose()`
`getInstance`	Static method which allows you to get the scrollspy instance associated to a DOM element.	`ScrollSpy.getInstance(dataSpyEl)`

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

Smooth scroll

Section 1

Section 2

Section 3

Subsection A

Subsection B

Section 4

How it works

Scrollspy - API

Import

Usage

Via data attributes

Via JavaScript

Options

Classes

Methods

Events

Access restricted

To view this section you must have an active PRO account

Scrollspy

Tailwind CSS 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

Smooth scroll

Section 1

Section 2

Section 3

Subsection A

Subsection B

Section 4

How it works

Related resources

Tutorials:

Extended Docs:

Generators and builders:

Design System (Figma):

Scrollspy - API

Import

Usage

Via data attributes

Via JavaScript

Options

Classes

Methods

Events