Tailwind CSS Scroll Nav

Scroll Nav is a versatile and lightweight JavaScript plugin designed to enhance navigation menus with smooth scrolling capabilities.

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.

                      
                        npm i @preline/scroll-nav

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.

                      
                        <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.

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

Demo examples

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

Check out Preline UI Components

Tailwind CSS Scroll Nav

On this page