1. Plugins
  2. Sidebar

Plugins

Tailwind CSS Sidebar

Build hidden sidebars into your project for navigation, shopping carts, and more.

Image Description

Installation

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

                      
                        npm i @preline/overlay
                      
                    

Example

Use the buttons below to show and hide an sidebar element via JavaScript that toggles the .show class on an element with the .hs-overlay class.

  • .hs-overlay.hidden hides content (default)
  • .hs-overlay shows content

Basic usage

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

                      
                        <button type="button" data-hs-overlay="#hs-overlay-unstyled" aria-controls="hs-overlay-unstyled" aria-label="Toggle navigation">
                            Open sidebar
                          </button>

                          <div id="hs-overlay-unstyled" class="hs-overlay hs-overlay-open:translate-x-0 -translate-x-full transition-all duration-300 transform hidden fixed top-0 left-0 bottom-0 z-[60] w-64 bg-white pt-3 pb-5 overflow-y-auto lg:block lg:translate-x-0 lg:right-auto lg:bottom-0">
                            <div class="flex justify-end px-3">
                              <button type="button" class="w-8 h-8" data-hs-overlay="#hs-overlay-unstyled" aria-controls="hs-overlay-unstyled" aria-label="Toggle navigation">
                                <span class="sr-only">Close Sidebar</span>
                                <svg class="w-3 h-3" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                                  <path d="M2.146 2.854a.5.5 0 1 1 .708-.708L8 7.293l5.146-5.147a.5.5 0 0 1 .708.708L8.707 8l5.147 5.146a.5.5 0 0 1-.708.708L8 8.707l-5.146 5.147a.5.5 0 0 1-.708-.708L7.293 8 2.146 2.854Z"/>
                                </svg>
                              </button>
                            </div>
                          </div>
                      
                    

Options

Parameters Description Options Default value
data-hs-overlay-backdrop-container Backdrop element selector Selector null
data-hs-overlay-close-on-backdrop Close sidebar on backdrop click false | true true
data-hs-overlay-scroll Enable or disable scroll for body when sidebar is opened false | true true
data-hs-sidear-backdrop Enable backdrop false | true true

Classes

Name Description
hs-overlay Sidebar container
hs-overlay-open Sidebar open

Methods

The HSOverlay object is contained within the global window object

Method Description
HSOverlay.open($sidebarEl) Open sidebar
HSOverlay.close($sidebarEl) Close sidebar
HSOverlay.toggle($sidebarEl) Toggle sidebar

Events

Method Description
open.hs.overlay Called when sidebar is open.
close.hs.overlay Called when sidebar is closed.

Open any sidebar event example.

                      
                        window.addEventListener('open.hs.overlay', ($sidebarEl) => {...})

                        // OR

                        HSOverlay.on('open', ($sidebarEl) => {...})
                      
                    

Open specific sidebar event example.

                      
                        $sidebarEl.addEventListener('open.hs.overlay', (evt) => {...})
                      
                    

Demo examples

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

Image Description
Check out Preline UI Sidebars