Build a tab component using Alpine.js

#javascript #tutorial #alpinejs

Welcome to another in our series of Alpine.js tutorials. Today we’ll be building a tab component that displays different content based on an active tab. If you’ve got working knowledge of JavaScript then this component is quite straight forward to build using Alpine.js.

Let’s get started by creating a HTML file and loading Alpine.js via CDN:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Alpine.js Tab Component</title>   
    <script defer src="https://unpkg.com/alpinejs"></script> 
  </head>
  <body> 
    <!-- alpine.js tab component -->   
  </body>
</html>

Then add a wrapper <div> for the component:

<div x-data="{ tab: 'description' }">
 <!-- nav -->
 <!-- content -->
</div>

x-data is used to define a chunk of HTML as an Alpine component. It also provides the reactive data for that component to reference, in this case the active tab. We’ll be building a 3 tab layout in which we want a “description” tab to be active on page load. To do this we’ve defined “description” as the default value in the x-data.

Next we’ll add the 3 tabs which are standard anchor elements within a <nav> element:

<nav>
  <a :class="{ 'active': tab === 'description' }" x-on:click.prevent="tab = 'description'" href="#">Description</a>
  <a :class="{ 'active': tab === 'dimensions' }" x-on:click.prevent="tab = 'dimensions'" href="#">Dimensions</a>
  <a :class="{ 'active': tab === 'reviews' }" x-on:click.prevent="tab = 'reviews'" href="#">Reviews</a>
</nav>

On the anchor elements we’re toggling an active class based on the tab value matching what’s currently set in the x-data directive. The tab value is updated when clicked using the x-on:click directive.

Finally let’s add <div> elements for the content of each tab:

<div x-show="tab === 'description'">
  <h3>Description</h3>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed cursus
    facilisis tristique. Lorem ipsum dolor sit amet, consectetur adipiscing
    elit. 
  </p>
</div>
<div x-show="tab === 'dimensions'">
  <h3>Dimensions</h3>
  <p>
    Donec placerat ullamcorper sodales. Nam congue justo sit amet erat luctus
    faucibus.
  </p>
</div>
<div x-show="tab === 'reviews'">
  <h3>Reviews</h3>
  <p>
    Sed hendrerit imperdiet accumsan. Nunc venenatis sit amet diam vel rutrum.
    Quisque interdum dui et molestie tristique.
  </p>
</div>

The x-show directive checks the current tab value and will only display the <div> when the corresponding tab value matches. If you now view this page in a browser you should be able to click each of the anchor elements and toggle the visibility of the corresponding content.

That’s all for this tutorial, you should now have a functioning tab component that just requires some CSS to match with you web page or application. If you’re interested in exploring some of the code used in this tutorial check out the offical Alpine.js documentation which can be found here.