• navigations
  • Tabs & Pills

navigations

Tailwind CSS Tabs & Pills

Tabs allow users to easily switch between different views, providing a seamless and efficient navigation experience.

Require FlyonUI JS
Class Name
Type
Description
tabsComponentBase class for tabs container.
tabComponentBase class for tab items.
tabs-borderedStyleThis class adds a bottom border to each tab item.
tabs-liftedStyleThis class applies a lifted style to each tab item.
tab-activeStateactive state for tabs-bordered and tabs-lifted.
activeStateEnables the selection of a tab to be initially displayed.
active-tab:{tw-utility-class}VariantThe modifier allows setting Tailwind classes when the tab is active for toggle and for content.
tabs-xsSizeExtra small tabs.
tabs-smSizeSmall tabs.
tabs-mdSizeMedium(default) tabs.
tabs-lgSizeLarge tabs.
tabs-xlSizeExtra large tabs.

About tabs

Utilize the tab JavaScript plugin to improve our navigation tabs and pills, allowing us to create tabbed sections with different content.

For dynamic tabbed interfaces, it’s important to include specific elements like role="tablist", role="tab", role="tabpanel", and other attributes as outlined in the WAI ARIA Authoring Practices. These help convey the structure and functionality to users who rely on assistive technologies like screen readers. As a good practice, use button elements for the tabs instead of links to ensure they trigger changes without navigating to new pages.

Basic example

Default

Basic example of tab.

Style: The tabs class serves as the base component for tabbed interfaces, where adding the tabs-bordered class gives the tab buttons an underlined appearance. The tab class is applied to individual tab buttons, and using the active class marks a tab as the initial active tab. The active-tab:{tw-utility-class} modifier allows Tailwind utility classes to be applied when the tab is active.

Functionality: The data-tab data attribute is used to link each tab button to its corresponding tabpanel using an ID. It’s crucial to set the role attribute on both the tab and tabpanel elements to ensure proper functionality and accessibility.

Filled

Example with Filled tabs.

Vertical tab

To create vertical tabs, you can use the tabs-vertical class. Additionally, you should add a flex class to a surrounding div to ensure the tabs and their associated content are displayed side by side.

For keyboard accessibility to function properly, please set data-attribute data-tabs-vertical to true.

Size variants

Extra small tab

Add responsive class tabs-{size} where {size} = xs|sm|md|lg|xl for tab of different sizes.

Small tab

Add responsive class tabs-{size} where {size} = xs|sm|md|lg|xl for tab of different sizes.

Default tab

Add responsive class tabs-{size} where {size} = xs|sm|md|lg|xl for tab of different sizes.

Large tab

Add responsive class tabs-{size} where {size} = xs|sm|md|lg|xl for tab of different sizes.

Extra large tab

Add responsive class tabs-{size} where {size} = xs|sm|md|lg|xl for tab of different sizes.

Alignment

Align center

Centered with TailwindCSS class justify-center.

Align end

Align at the end TailwindCSS class justify-end.

Illustrations

Icons

Below example shows tabs with icons.

Badges

Below example shows tabs with badges.

Lifted tab

Apply the tabs-lifted component class along with tabs to display the tab in a lifted style.

Horizontal scroll

When content extends beyond the screen, a horizontal scrollbar ensures the tab bar remains aligned. Apply the overflow-x-auto class for a scrollbar. Resize the window to see an example.

Hover

This example demonstrates tabs that dynamically open and close on hover, highlighting the use of eventType:.

Destroy/Reinitialize

The destroy method is provided to facilitate the destruction of a tab element.

Responsive

Select

The demonstration illustrates responsiveness by showcasing how the tabs switch to a select menu on smaller screens.

Pill Illustrations

Segments

Below example shows tabs as segments.

Pill with semantic color

Use component classes btn and btn-text to style pills with a button-like appearance.

Pills with icon

Below example shows pills with icons.

Filled pills

Below example shows Filled pills.

Vertical Pill

For tabs styled with the tabs-vertical class and pills styled with Tailwind classes, please make sure they are distinct and not linked.

For keyboard accessibility to function properly, please set data-attribute data-tabs-vertical to true.

Accessibility notes

Keyboard interactions

COMMAND
DESCRIPTION
EnterActivates the selected tab.
Home End
Focuses first/last non-disabled item.
Selects the previous/next non-disabled tab in vertical mode.
Selects the previous/next non-disabled tab.

JavaScript behavior

Options

PARAMETERS
DESCRIPTION
OPTIONS
DEFAULT VALUE
data-tabsIncludes configuration options for customizing the behavior and appearance of tabs. Should be incorporated into the tab list.--
data-tabActivate a tab by specifying on an element. This must be a valid selector.--
:eventTypeUse hover to activate tabs on mouseover, or click to activate them manually (which is the default setting).“click” & “hover”click
data-tab-selectIt accepts an id parameter, which allows the select options to function as tabs.--
data-tabs-verticalEnabling this setting facilitates vertical keyboard accessibility.boolean-

Methods

The HSTabs object is contained within the global window object.

METHOD
DESCRIPTION
PUBLIC METHODS
destroy()Destroys the instance, removes generated markup (if any), removes added classes and attributes.
STATIC METHODS
HSTabs.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.
HSTabs.open(target)
Opens the element associated to the target.
  • The target must be a Node.

Method usage

Below is a demonstration illustrating how to use the public methods. It might seem a bit complex because the open() method requires the ID of the button with role="tab" and data-tab="tabpanel-id", rather than just the tabpanel-id.

In the example below, we’ve provided the ID tabs-method-3 and added an event listener to the openBtn.

Open item (static method).

// This method is used in above example.
const openBtn = document.querySelector('#open-btn');

openBtn.addEventListener('click', () => {
  HSTabs.open(document.querySelector('#tabs-method-item-3'))
});

Destroy instance(public method)

const { element } = HSTabs.getInstance('#tabs', true);
const destroyBtn = document.querySelector('#destroy-btn');

destroyBtn.addEventListener('click', () => {
  element.destroy();
});

Events

METHOD
DESCRIPTION
RETURNED VALUE
on:changeTriggered whenever a dropdown menu is opened.
  • el HTMLElement. Toggle button (element that was clicked).
  • prev string. Previous tab ID.
  • current string. Current tab ID.

Event usage

Below, is the demonstration on how to use the event. Apply the ID to the role=tablist component class. To test these event, copy the following event into your console and click the button.

const el = HSTabs.getInstance('#tabs-event');

el.on('change', ({ el, prev, current }) => {
  console.log('el', el)
  console.log('prev', prev)
  console.log('current', current)
})