January 9, 2023

Make a Tabs Component with Alpine JS in Three Minutes

Justin Golden

Length: Short

Level: ✓ Beginner ✓ Intermediate ✗ Advanced

If you don’t know Alpine JS, check their website and then spend less than an hour following along the Alpine JS crash course from Traversy Media.

For a TL;DR, check the complete code at the bottom of this article.

Step 0: Add Alpine JS to the Project

This is step zero because I’m assuming you’ve already got Alpine if you’re here, but in case you don’t:

<script src="https://unpkg.com/alpinejs" defer></script>

Fo the latest version. To pin a specific version:

<script src="https://unpkg.com/alpinejs@3.10.5/dist/cdn.min.js" defer></script>

If you go to https://unpkg.com/alpinejs in browser, it’ll redirect to the latest version. You can then copy that URL (such as https://unpkg.com/alpinejs@3.10.5/dist/cdn.min.js above) to make sure you stick with the same version.

Just add the script tag above inside your body and then move on to start this tutorial:

Step 1: Boilerplate HTML

First, let’s add in our tabs in an unordered list. We will click these to change the content displayed. Second, let’s add in the tab content. This is what will changed based on what tab is open.

<!-- Tabs -->
<ul>
	<li>
		<button href="#">Tab 1</button>
	</li>
	<li>
		<button href="#">Tab 2</button>
	</li>
	<li>
		<button href="#">Tab 3</button>
	</li>
</ul>

<!-- Tab content -->
<div>
	<div>Tab 1 content</div>
	<div>Tab 2 content</div>
	<div>Tab 3 content</div>
</div>

Step 2: Our Data - Alpine x-data

Wrap your HTML in a div and set its x-data to an object that stores our currentTab as 1:

<div x-data="{ currentTab: 1 }">
	<!-- Tabs and tab content here -->
</div>

We need this to wrap all of our tab code so they have access to this x-data.

Step 3: Conditionally Show Tabs - Alpine x-show

For each of our tabs, we only want to show them when currentTab is set to their tab number:

<div x-show="currentTab === 1">Tab 1 content</div>
<div x-show="currentTab === 2">Tab 2 content</div>
<div x-show="currentTab === 3">Tab 3 content</div>

Step 4: Change Data on Click - Alpine @click

Clicking the tabs should change currentTab to the correct value. We’ll add an @click listener:

<li @click="currentTab = 1">
	<button href="#">Tab 1</button>
</li>
<li @click="currentTab = 2">
	<button href="#">Tab 2</button>
</li>
<li @click="currentTab = 3">
	<button href="#">Tab 3</button>
</li>

Complete Code

<script src="https://unpkg.com/alpinejs@3.10.5/dist/cdn.min.js" defer></script>

<div x-data="{ currentTab: 1 }">
	<ul>
		<li @click="currentTab = 1">
			<button href="#">Tab 1</button>
		</li>
		<li @click="currentTab = 2">
			<button href="#">Tab 2</button>
		</li>
		<li @click="currentTab = 3">
			<button href="#">Tab 3</button>
		</li>
	</ul>
	<div>
		<div x-show="currentTab === 1">Tab 1 content</div>
		<div x-show="currentTab === 2">Tab 2 content</div>
		<div x-show="currentTab === 3">Tab 3 content</div>
	</div>
</div>

Closing

I hope you learned something from this article. Note that you can use any numbers (or strings) for your currentTab and change which elements have these properties (I used ul li for semantic reasons and buttons because they’re focusable and clickable and don’t navigate the user to a page).