Preview Purchase
License Reminder
One license allows using Metronic for a single deployment and all subsequent usage requires a separate license.
If you plan to use Metronic in a Software as a Service (SaaS) model with paid subscriptions, you'll need an Extended License.
Navigation

Tailwind CSS Scrollspy

Tailwind CSS Scrollspy component enhances user navigation by highlighting active links as users scroll through different sections of a webpage. This feature is particularly useful for single-page applications and long-form content, providing a clear visual indicator of the user's current position on the page.

Basic Scrollspy

Implement a Tailwind CSS Scrollspy within a scrollable container to automatically highlight navigation links as you scroll through various sections.
Preview HTML
Item 1 Item 2 Item 3 Item 4

Item 1

Experience the ethereal beauty of twilight in the mountains, where the last rays of the sun meet the gentle night. As the sky transitions through a palette of warm oranges, pinks, and purples, the mountain silhouettes create a striking contrast, crafting a moment of peace that stands still in time. This captivating scene encapsulates the majestic solitude of nature, inviting viewers to pause and reflect on the day's end. Perfect for lovers of nature and photography, this image embodies the serene splendor of the great outdoors. As nightfall approaches, the first stars begin to twinkle in the twilight, heralding the arrival of a celestial showcase. The mountain's silhouette against the twilight sky becomes a majestic backdrop for stargazers and dreamers alike, offering a glimpse into the infinite expanse of the universe.

Item 2

Experience the ethereal beauty of twilight in the mountains, where the last rays of the sun meet the gentle night. As the sky transitions through a palette of warm oranges, pinks, and purples, the mountain silhouettes create a striking contrast, crafting a moment of peace that stands still in time. This captivating scene encapsulates the majestic solitude of nature, inviting viewers to pause and reflect on the day's end. Perfect for lovers of nature and photography, this image embodies the serene splendor of the great outdoors. As nightfall approaches, the first stars begin to twinkle in the twilight, heralding the arrival of a celestial showcase. The mountain's silhouette against the twilight sky becomes a majestic backdrop for stargazers and dreamers alike, offering a glimpse into the infinite expanse of the universe.

Item 3

Experience the ethereal beauty of twilight in the mountains, where the last rays of the sun meet the gentle night. As the sky transitions through a palette of warm oranges, pinks, and purples, the mountain silhouettes create a striking contrast, crafting a moment of peace that stands still in time. This captivating scene encapsulates the majestic solitude of nature, inviting viewers to pause and reflect on the day's end. Perfect for lovers of nature and photography, this image embodies the serene splendor of the great outdoors. As nightfall approaches, the first stars begin to twinkle in the twilight, heralding the arrival of a celestial showcase. The mountain's silhouette against the twilight sky becomes a majestic backdrop for stargazers and dreamers alike, offering a glimpse into the infinite expanse of the universe.

Item 4

Experience the ethereal beauty of twilight in the mountains, where the last rays of the sun meet the gentle night. As the sky transitions through a palette of warm oranges, pinks, and purples, the mountain silhouettes create a striking contrast, crafting a moment of peace that stands still in time. This captivating scene encapsulates the majestic solitude of nature, inviting viewers to pause and reflect on the day's end. Perfect for lovers of nature and photography, this image embodies the serene splendor of the great outdoors. As nightfall approaches, the first stars begin to twinkle in the twilight, heralding the arrival of a celestial showcase. The mountain's silhouette against the twilight sky becomes a majestic backdrop for stargazers and dreamers alike, offering a glimpse into the infinite expanse of the universe.

Nested

Implement a Tailwind CSS Scrollspy within a scrollable container to automatically highlight nested navigation links as you scroll through various sections.
Preview HTML
Item 1
Sub item 1 Sub item 2 Sub item 3
Item 2
Item 3
Sub item 4 Sub item 5 Sub item 6
Item 4

Sub item 1

Experience the ethereal beauty of twilight in the mountains, where the last rays of the sun meet the gentle night. As the sky transitions through a palette of warm oranges, pinks, and purples, the mountain silhouettes create a striking contrast, crafting a moment of peace that stands still in time. This captivating scene encapsulates the majestic solitude of nature, inviting viewers to pause and reflect on the day's end. Perfect for lovers of nature and photography, this image embodies the serene splendor of the great outdoors. As nightfall approaches, the first stars begin to twinkle in the twilight, heralding the arrival of a celestial showcase. The mountain's silhouette against the twilight sky becomes a majestic backdrop for stargazers and dreamers alike, offering a glimpse into the infinite expanse of the universe.

Sub item 2

Experience the ethereal beauty of twilight in the mountains, where the last rays of the sun meet the gentle night. As the sky transitions through a palette of warm oranges, pinks, and purples, the mountain silhouettes create a striking contrast, crafting a moment of peace that stands still in time. This captivating scene encapsulates the majestic solitude of nature, inviting viewers to pause and reflect on the day's end. Perfect for lovers of nature and photography, this image embodies the serene splendor of the great outdoors. As nightfall approaches, the first stars begin to twinkle in the twilight, heralding the arrival of a celestial showcase. The mountain's silhouette against the twilight sky becomes a majestic backdrop for stargazers and dreamers alike, offering a glimpse into the infinite expanse of the universe.

Sub item 3

Experience the ethereal beauty of twilight in the mountains, where the last rays of the sun meet the gentle night. As the sky transitions through a palette of warm oranges, pinks, and purples, the mountain silhouettes create a striking contrast, crafting a moment of peace that stands still in time. This captivating scene encapsulates the majestic solitude of nature, inviting viewers to pause and reflect on the day's end. Perfect for lovers of nature and photography, this image embodies the serene splendor of the great outdoors. As nightfall approaches, the first stars begin to twinkle in the twilight, heralding the arrival of a celestial showcase. The mountain's silhouette against the twilight sky becomes a majestic backdrop for stargazers and dreamers alike, offering a glimpse into the infinite expanse of the universe.

Item 2

Experience the ethereal beauty of twilight in the mountains, where the last rays of the sun meet the gentle night. As the sky transitions through a palette of warm oranges, pinks, and purples, the mountain silhouettes create a striking contrast, crafting a moment of peace that stands still in time. This captivating scene encapsulates the majestic solitude of nature, inviting viewers to pause and reflect on the day's end. Perfect for lovers of nature and photography, this image embodies the serene splendor of the great outdoors. As nightfall approaches, the first stars begin to twinkle in the twilight, heralding the arrival of a celestial showcase. The mountain's silhouette against the twilight sky becomes a majestic backdrop for stargazers and dreamers alike, offering a glimpse into the infinite expanse of the universe.

Sub item 4

Experience the ethereal beauty of twilight in the mountains, where the last rays of the sun meet the gentle night. As the sky transitions through a palette of warm oranges, pinks, and purples, the mountain silhouettes create a striking contrast, crafting a moment of peace that stands still in time. This captivating scene encapsulates the majestic solitude of nature, inviting viewers to pause and reflect on the day's end. Perfect for lovers of nature and photography, this image embodies the serene splendor of the great outdoors. As nightfall approaches, the first stars begin to twinkle in the twilight, heralding the arrival of a celestial showcase. The mountain's silhouette against the twilight sky becomes a majestic backdrop for stargazers and dreamers alike, offering a glimpse into the infinite expanse of the universe.

Sub item 5

Experience the ethereal beauty of twilight in the mountains, where the last rays of the sun meet the gentle night. As the sky transitions through a palette of warm oranges, pinks, and purples, the mountain silhouettes create a striking contrast, crafting a moment of peace that stands still in time. This captivating scene encapsulates the majestic solitude of nature, inviting viewers to pause and reflect on the day's end. Perfect for lovers of nature and photography, this image embodies the serene splendor of the great outdoors. As nightfall approaches, the first stars begin to twinkle in the twilight, heralding the arrival of a celestial showcase. The mountain's silhouette against the twilight sky becomes a majestic backdrop for stargazers and dreamers alike, offering a glimpse into the infinite expanse of the universe.

Sub item 6

Experience the ethereal beauty of twilight in the mountains, where the last rays of the sun meet the gentle night. As the sky transitions through a palette of warm oranges, pinks, and purples, the mountain silhouettes create a striking contrast, crafting a moment of peace that stands still in time. This captivating scene encapsulates the majestic solitude of nature, inviting viewers to pause and reflect on the day's end. Perfect for lovers of nature and photography, this image embodies the serene splendor of the great outdoors. As nightfall approaches, the first stars begin to twinkle in the twilight, heralding the arrival of a celestial showcase. The mountain's silhouette against the twilight sky becomes a majestic backdrop for stargazers and dreamers alike, offering a glimpse into the infinite expanse of the universe.

Item 4

Experience the ethereal beauty of twilight in the mountains, where the last rays of the sun meet the gentle night. As the sky transitions through a palette of warm oranges, pinks, and purples, the mountain silhouettes create a striking contrast, crafting a moment of peace that stands still in time. This captivating scene encapsulates the majestic solitude of nature, inviting viewers to pause and reflect on the day's end. Perfect for lovers of nature and photography, this image embodies the serene splendor of the great outdoors. As nightfall approaches, the first stars begin to twinkle in the twilight, heralding the arrival of a celestial showcase. The mountain's silhouette against the twilight sky becomes a majestic backdrop for stargazers and dreamers alike, offering a glimpse into the infinite expanse of the universe.

Source Code

The following source file manages the JavaScript behavior of the Tailwind CSS Scrollspy component. Upon building the assets using Webpack Build Tools , the below file is compiled and added into the dist/assets/js/core.bundle.js bundle, making it available globally across all pages.
File Description
src/core/components/scrollspy/scrollspy.ts The TypeScript source file that manages the JavaScript behavior of the Tailwind CSS Scrollspy component.

HTML Markup

The following markup outlines the core structure of the Tailwind CSS Scrollspy component. 
				
					<div class="flex gap-8 w-full rounded-xl border p-6">
 <div class="flex flex-col grow relative before:absolute before:left-[10px] before:top-0 before:bottom-0 before:border-l before:border-gray-200 gap-1 shrink-0 w-[125px]" data-scrollspy="true" data-scrollspy-offset="30px|lg:50px" data-scrollspy-target="#scrollable_1">
  <a class="flex items-center rounded-lg pl-2.5 pr-2.5 py-2.5 gap-1.5 text-2sm font-medium text-gray-700 hover:text-primary scrollspy-active:bg-secondary-active scrollspy-active:text-primary" data-scrollspy-anchor="true" href="#item_1">
   <span class="flex w-1.5 relative before:absolute before:top-0 before:left-px before:size-1.5 before:rounded-full before:-translate-x-2/4 before:-translate-y-2/4 scrollspy-active:before:bg-primary">
   </span>
   Item 1
  </a>
  <a class="flex items-center rounded-lg pl-2.5 pr-2.5 py-2.5 gap-1.5 text-2sm font-medium text-gray-700 hover:text-primary scrollspy-active:bg-secondary-active scrollspy-active:text-primary" data-scrollspy-anchor="true" href="#item_2">
   <span class="flex w-1.5 relative before:absolute before:top-0 before:left-px before:size-1.5 before:rounded-full before:-translate-x-2/4 before:-translate-y-2/4 scrollspy-active:before:bg-primary">
   </span>
   Item 2
  </a>
 </div>
 <div class="scrollable-y flex flex-col gap-5 h-[300px] pr-2" id="scrollable_1">
  <div id="item_1">
   Item 1 content.
  </div>
  <div id="item_2">
   Item 2 content.
  </div>
 </div>
</div>

Attributes

The following HTML attributes are utilized by Tailwind CSS Scrollspy component to control its JavaScript behavior.
HTML Attribute Description
data-scrollspy-anchor="true" Indicates a scrollspy navigation item element where the href attribute value provides the linked content ID selector, facilitating scroll tracking and navigation highlighting.
data-scrollspy-group="true" Specifies a group element that contains nested child anchors, organizing them into a hierarchy for the scrollspy navigation.

Variants

Utilize the following Tailwind CSS Scrollspy variants to manage the appearance of the scrollspy items and their child elements. For more information, refer to the Tailwind CSS Variant documentation .
Class Description
scrollspy-active: A custom Tailwind CSS variant that becomes activated when the associated scrollspy element is in view. It can be applied to scrollspy toggles, content, and child elements, allowing for the customization of appearance and behavior when they are in the active or visible state during scrolling. 
				
					<a class="btn text-primary hover:text-primary-active scrollspy-active:text-primary-inverse scrollspy-active:bg-primary" data-scrollspy-anchor="true" href="#item_1">
 Scrollspy Item
</a>

Data Attribute Initialization

Auto-initialize all KTScrollspy instances on page load by adding the data-scrollspy="true" attribute to your scrollspy element. This triggers on the fly initialization by the KTScrollspy JavaScript component. 
				
					<div data-scrollspy="true" data-scrollspy-offset="30px|lg:50px" data-scrollspy-target="#scrollable_1" id="my_scrollspy">
 ...
</div>
These attributes allow you to set options for the KTScrollspy component during initialization. The values you provide as strings are automatically converted to the appropriate KTScrollspy Options .
HTML Attribute Type Default Description
data-scrollspy boolean true Automatically initializes Tailwind CSS Scrollspy instances on page load. This can be disabled for manual initialization via JavaScript.
data-scrollspy-target string "body" Specifies the ID selector of the scrollable element that the scrollspy should monitor.
data-scrollspy-offset number 0 Defines the number of pixels to offset when activating each section of the scrollspy, allowing for fine-tuned control over the activation point.
data-scrollspy-smooth boolean true Enables smooth scrolling animation when navigating between sections in the scrollspy, providing a more fluid user experience.

JavaScript Initialization

To initialize a new scrollspy component, pass the corresponding DOM element and configuration options to the KTScrollspy class constructor.
JavaScript HTML 
				
					const scrollspyEl = document.querySelector('#my_scrollspy');
const options = {
	target: '#my_scrollable',
	offset: 0,
	smooth: true
};

const scrollspy = new KTScrollspy(scrollspyEl, options);

To initialize the scrollspy with JavaScript, use data-scrollspy="false" attribute instead. This prevents automatic initialization on page load.

Options

This table outlines the configuration options for initialization of Tailwind CSS Scrollspy instances, using the KTScrollspy JavaScript component.
Option Type Default Description
target string "body" Specifies the ID selector of the scrollable element that the scrollspy should monitor.
offset number 0 Defines the number of pixels to offset when activating each section of the scrollspy, allowing for fine-tuned control over the activation point.
smooth boolean true Enables smooth scrolling animation when navigating between sections in the scrollspy, providing a more fluid user experience.

Utilities

Manage and interact with KTScrollspy instances using these static methods of KTScrollspy class.
Method Description
init() Automatically initializes KTScrollspy object for all elements with the data-scrollspy="true" attribute on page load.
createInstances() Allows to create KTScrollspy instances for all elements that have been dynamically added to the DOM but haven't been activated yet.
getInstance(element) Returns the KTScrollspy object associated with the given DOM element element .
getOrCreateInstance(element) Returns the existing KTScrollspy object for the provided DOM element element , or creates a new instance if none exists, then returns the same.
JavaScript HTML 
				
					// Initialize all scrollspys
KTScrollspy.init()

// Initialzie pending scrollspys
KTScrollspy.createInstances();

// Get scrollspy object
const scrollspyEl = document.querySelector('#my_scrollspy');
const scrollspy = KTScrollspy.getInstance(scrollspyEl);

Methods

Use KTScrollspy component's API methods to programmatically control its behavior.
Method Description
new KTScrollspy(element, options) Creates an object instance of KTScrollspy class for the given DOM element and configuration options .
scrollTo(anchorElement) Programmatically scrolls to the specified anchor element, aligning it within the viewport according to the scrollspy's configuration. This method facilitates direct navigation to scrollspy sections without user-initiated scrolling.
update() Refreshes and recalculates the positions and states of all scrollspy elements, ensuring that the scrollspy functionality accurately reflects the current layout and scroll position of the page.
updateAnchor(anchorElement) Updates the specific anchor element within the scrollspy system, recalculating its position and state based on the current scroll position. This is useful for dynamically added content or changes in the layout that affect only certain anchors.
isActive(anchorElement) Returns a boolean value indicating whether the specified anchor element is currently active within the scrollspy system, allowing for custom logic or styles to be applied based on the active state of the element.
getOption(name) Retrieves the value of a configuration option by name parameter from a KTScrollspy instance.
getElement() Retrieves the DOM element linked to a specific KTScrollspy instance.
on(eventName, handler) Allows attaching event listeners to the KTScrollspy custom events using the eventName and eventId string parameters. These events enable programmatic interaction based on user actions or internal state changes of KTScrollspy. The function returns string as a unique identifier for the registered listener, allowing you to remove it later if needed.
off(eventName, eventId) Removes an event listener for the eventName and eventId parameters attached with the on method.
dispose() Removes the KTScrollspy instance from an element, including any associated data stored on the DOM element.
JavaScript HTML 
				
					const scrollspyItemEl = document.querySelector('#my_scrollspy_item');
const scrollspyEl = document.querySelector('#my_scrollspy');
const scrollspy = KTScrollspy.getInstance(scrollspyEl);

scrollspy.scrollTo(scrollspyItemEl);
scrollspy.update();

Events

KTScrollspy custom events allows you to register callback functions(event listeners) that will be invoked automatically whenever specific custom events are triggered within the component.
Event Description
activate This event fires on the scroll element whenever an anchor is activated by the scrollspy. 
				
					const scrollspyEl = document.querySelector('#my_scrollspy');
const scrollspy = KTScrollspy.getInstance(scrollspyEl);

scrollspy.on('activate', (element) => {
	console.log('anchor activate event');
});
Previous Pagination Next Scrollto