1. Navbars
  2. Navs and Tabs

Components

Tailwind CSS Navs and Tabs - Preline UI

Tabs make it easy to switch between different views.

Basic usage

Example

The base nav component is built with flexbox and provide a strong foundation for building all types of navigation components.

Classes are used throughout, so your markup can be super flexible. Use <ul>s like above, <ol> if the order of your items is important.

Available styles

Change the style of tabs component with modifiers and utilities. Mix and match as needed, or build your own.

Tabs with underline

A basic form of tabs with underline.

With icons

Contained tabs with icons.

With badges

Simple example with badges.

Horizontal alignment

Centered with .justify-center:

Right-aligned with .justify-end:

Vertical

Vertically stacked navigation.

Card type tab

Another type of Tabs.

Segment

Another type of Tabs with segment.

Bar with underline

Another type of Tabs with underlined bar.

Pills on gray color

Another type of Tabs with pills on gray color.

Pills with brand color

Another type of Tabs with pills.

Fill and justify

Force your nav's contents to extend the full available width one of two modifier classes. Notice that all horizontal space is occupied, but not every nav item has the same width.

Example with <ul>-based navigation.

Example with <nav>-based navigation.

Equal-width elements

All horizontal space will be occupied by nav links, but unlike the example above, every nav item will be the same width.

Example with <nav>-based navigation.

JavaScript tabs

Requires JS

Use the tab JavaScript plugin - to extend our navigational tabs and pills to create tabbable panes of local content.

Dynamic tabbed interfaces, as described in the WAI ARIA Authoring Practices, require role="tablist", role="tab", role="tabpanel", and additional aria- attributes in order to convey their structure, functionality and current state to users of assistive technologies (such as screen readers). As a best practice, we recommend using <button> elements for the tabs, as these are controls that trigger a dynamic change, rather than links that navigate to a new page or location.

This is the first item's tab body.

Vertical example.

This is the first item's tab body.

Select on mobile

Where long content doesn't fit on the screen, change the tab bar to <select> on mobile.

Resize the example to see it in action.

Accessibility notes

Options

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

JavaScript behavior

Options

Parameters Description Options Default value
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 HSTabs object is contained within the global window object

Method Description
HSTabs.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

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

Change specific tab event example.

                  
                    $tabToggleEl.addEventListener('open.hs.collapse', (evt) => {...})