Tabs

What tabs can do

Use multiple independent tab blocks on one page
Open a specific tab via URL hash
Turn tabs into spollers below a given screen width (handy for mobile)
Animate opening/closing of tab panels

Tip

The component connects automatically when you use the required data-anim-* attributes in markup.

Component location

Files are located in src/components/layout/tabs. Inside you’ll find the JS, an HTML example, and SCSS styles for the component.

Basic markup

Build the structure with: data-anim-tabs on the wrapper, data-anim-tabs-titles on the titles container, and data-anim-tabs-body on the content container. To make a tab open by default, add --tab-active to its title button.

Tabs block (3 tabs)


<div data-anim-tabs class="tabs">
	<nav data-anim-tabs-titles class="tabs__navigation">
		<button type="button" class="tabs__title --tab-active">Tab #1</button>
		<button type="button" class="tabs__title">Tab #2</button>
		<button type="button" class="tabs__title">Tab #3</button>
	</nav>

	<div data-anim-tabs-body class="tabs__content">
		<div class="tabs__body">Content for Tab #1</div>
		<div class="tabs__body">Content for Tab #2</div>
		<div class="tabs__body">Content for Tab #3</div>
	</div>
</div>

Turn tabs into spollers on breakpoint

If you want the tabs to become “spollers” (accordion-like) below a certain width, set that width as the value of data-anim-tabs.

Tabs become spollers below 768px


<div data-anim-tabs="768" class="tabs">
	...
</div>

When the transform happens, the wrapper receives a helper class --tab-spoller. Use it to adjust styling for the spoller layout.

Open a specific tab via URL hash

To enable hash behavior, add data-anim-tabs-hash to the tabs wrapper. Then clicking tab titles will update the URL hash in this format: #tab-0-1 where:

0 — the index/ID of the tabs block on the page
1 — the index/ID of the tab inside that block

Enable hash support


<div data-anim-tabs data-anim-tabs-hash class="tabs">
	...
</div>

Examples

#tab-0-1 opens the 2nd tab in the 1st tabs block.
#tab-2-0 opens the 1st tab in the 3rd tabs block.

Smooth open animation

To make the content switch feel smoother, add data-anim-tabs-animate. Set its value in milliseconds (default: 500).

Animate tabs (1s)


<div data-anim-tabs data-anim-tabs-animate="1000" class="tabs">
	...
</div>

Download

Build clean interfaces with compact navigation and fast content switching. Download the template and start using the Tabs component today.

Download Animmaster Vite Template Save your time — start now

Component: Tabs Switch content panels with titles, hash support, and responsive “spoller” mode