1. Plugins
  2. Tabs

Plugins

Tailwind CSS Tabs

Tabs make it easy to switch between different views.

Image Description

Installation

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

                      
                        npm i @preline/tabs
                      
                    

Example

A basic form of tabs.

Basic usage

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

                      
                        <nav class="flex space-x-2" aria-label="Tabs" role="tablist">
                          <button type="button" class="active" id="unstyled-tabs-item-1" data-hs-tab="#unstyled-tabs-1" aria-controls="unstyled-tabs-1" role="tab">
                            Tab 1
                          </button>
                          <button type="button" id="unstyled-tabs-item-2" data-hs-tab="#unstyled-tabs-2" aria-controls="unstyled-tabs-2" role="tab">
                            Tab 2
                          </button>
                          <button type="button" id="unstyled-tabs-item-3" data-hs-tab="#unstyled-tabs-3" aria-controls="unstyled-tabs-3" role="tab">
                            Tab 3
                          </button>
                        </nav>

                        <div class="mt-3">
                          <div id="unstyled-tabs-1" role="tabpanel" aria-labelledby="unstyled-tabs-item-1">
                            This is the <em>first</em> item's tab body.
                          </div>
                          <div id="unstyled-tabs-2" class="hidden" role="tabpanel" aria-labelledby="unstyled-tabs-item-2">
                            This is the <em>second</em> item's tab body.
                          </div>
                          <div id="unstyled-tabs-3" class="hidden" role="tabpanel" aria-labelledby="unstyled-tabs-item-3">
                            This is the <em>third</em> item's tab body.
                          </div>
                        </div>
                      
                    

Keyboard interactions

Command Description

ArrowLeft and ArrowRight

Selects the previous/next non-disabled tab

ArrowUp and ArrowDown in vertical mode

Selects the previous/next non-disabled tab

Home and End

Selects the first/last non-disabled tab

Enter

Activates the selected tab

Options

Parameters Description
data-hs-tab Activate a tab by specifying on an element

Classes

Name Description
hs-tab-active: A modifier that allows you to set taiwind classes when the tab is active for toggle and for content

Methods

The HSTab object is contained within the global window object

Method Description
HSTab.open($tabToggleEl) Open tab

Events

Method Description
change.hs.tab Called when any tab is changed.

Open any dropdown menu event example.

                      
                        window.addEventListener('change.hs.tab', ($tabToggleEl) => {...})

                        // OR

                        HSTab.on('change', ($tabToggleEl) => {...})
                      
                    

Change specific tab event example.

                      
                        $tabToggleEl.addEventListener('open.hs.collapse', (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 Tabs