Update v4.2 - New components, 10+ framework guides, and quality improvements. Visit Changelog

........ Github
Figma X (Twitter)

Tailwind CSS Scroll Nav Plugin API

Headless, unstyled scroll nav plugin built with JavaScript and TypeScript, including installation, usage, options, methods, events, and selectors.

JavaScript Typescript

Installation

To get started, install Scroll Nav plugin via npm, else you can skip this step if you are already using Preline UI as a package.

  1. Install the plugin

    Install @preline/scroll-nav via npm

    Terminal 
                              
                            npm i @preline/scroll-nav

  2. Add the plugin CSS

    Use @source to register the plugin's JavaScript path for Tailwind CSS scanning, then @import the plugin's CSS files into your Tailwind CSS file.

    main.css 
                              
                            @import "tailwindcss";
                            
                            /* @preline/scroll-nav */
                            /* [!code highlight:3] */
                            @source "../node_modules/@preline/scroll-nav/*.js";
                            @import "./node_modules/@preline/scroll-nav/variants.css";
                            @import "./node_modules/@preline/scroll-nav/theme.css";

  3. Add the plugin JavaScript

    Include the JavaScript <script> that powers the interactive elements near the end of your </body> tag:

    HTML

    Additional Initialization Options

    Use the non-auto entry if you need manual initialization. In this mode, automatic initialization on page load is not included, so the component should be initialized explicitly.

    HTML (non-auto)

    Via bundler

    When using a bundler (Vite, webpack, etc.), import the plugin directly as an ES module.

    JavaScript (auto) 
                              
                            import "@preline/scroll-nav";
    JavaScript (non-auto) 
                              
                            import HSScrollNav from "@preline/scroll-nav/non-auto";
                            
                            HSScrollNav.autoInit();
                            
                            // Or initialize a specific element manually
                            const el = document.querySelector("#scroll-nav");
                            if (el) new HSScrollNav(el);

Example

A horizontally scrolling navigation component that moves seamlessly within a carousel.

Basic usage

Prefer to create your own style? Here is a completely unstylized example.

HTML 
                      
                        <div data-hs-scroll-nav class="relative px-6">
                          <button type="button" class="hs-scroll-nav-prev">Previous</button>
                        
                          <nav class="hs-scroll-nav-body flex flex-nowrap overflow-x-auto snap-x snap-mandatory">
                            <a class="snap-start" href="#">Electronics</a>
                            <a class="snap-start" href="#">Clothing</a>
                            <a class="snap-start" href="#">House & Garden</a>
                            <a class="snap-start" href="#">Baby Care</a>
                            <a class="snap-start" href="#">Home appliances</a>
                            <a class="snap-start" href="#">Sports & Fitness</a>
                            <a class="snap-start" href="#">Constraction & Renovation</a>
                            <a class="snap-start" href="#">Food</a>
                            <a class="snap-start" href="#">Pharmacy</a>
                            <a class="snap-start" href="#">Pet Products</a>
                            <a class="snap-start" href="#">Books</a>
                            <a class="snap-start" href="#">Tourism, fishing, hunting</a>
                            <a class="snap-start" href="#">Furniture</a>
                            <a class="snap-start" href="#">Jewelery</a>
                            <a class="snap-start" href="#">Accessories</a>
                            <a class="snap-start" href="#">Games & Consoles</a>
                            <a class="snap-start" href="#">Stationery</a>
                            <a class="snap-start" href="#">Digital Goods</a>
                            <a class="snap-start" href="#">Music</a>
                          </nav>
                        
                          <button type="button" class="hs-scroll-nav-next">Next</button>
                        </div>

JavaScript behavior

Data Options

Name Description Options Default value
data-hs-scroll-nav Activate a Scroll Nav by specifying on an element. Should be added to the container. — —
:autoCentering Defines whether the Scroll Nav should align with the active item when the window loads. boolean false

Tailwind Modifiers

Name Description
hs-scroll-nav-active:* The class is applied to the navigation item to style the currently active element.
hs-scroll-nav-disabled:* The class is added to the prev/next buttons for style the disabled state.

Methods

The HSScrollNav object is contained within the global window object

Method Description
Public methods
getCurrentState() Retrieves the currently visible first, last, and center elements within the scrollable navigation container.
goTo(el, cb) Smoothly scrolls the navigation container to bring the specified element into view.
  • el the target element to scroll into view.
  • cb a callback function executed after scrolling completes.
centerElement(el, behavior) Scrolls the navigation container to position the specified element at the center of the visible area.
  • el the element to center within the scrollable container.
  • behavior defines the scrolling animation type (auto or smooth). Default: smooth.
destroy() Destroys the instance, removes generated markup (if any), removes added classes and attributes.
Static methods
HSScrollNav.getInstance(target, isInstance) Returns the element associated to the target.
  • target should be a Node or string (valid selector)
  • isInstance boolean. Returns the instance instead of Node if true

Destroy instance.

JavaScript 
                      
                        const { element } = HSScrollNav.getInstance('#scroll-nav', true);
                        const ecommerce = document.querySelector('#ecommerce-link');
                        
                        element.goTo(ecommerce, () => {
                          console.log('Scrolled!');
                        });

Ready to use Components

Looking for prebuilt UI components based on the Tailwind CSS? Preline UI packs hundreds of component examples for all your website needs.

Scroll Nav

Explore ready-to-use Tailwind CSS examples built with Preline UI.

View Scroll Nav examples

Scroll Nav

© 2026 Preline Labs.