DEV Community

Michael Burrows
Michael Burrows

Posted on • Originally published at w3collective.com

Build a tab component using Alpine.js

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>
Enter fullscreen mode Exit fullscreen mode

Then add a wrapper <div> for the component:

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

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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.

Top comments (1)

Collapse
 
comforx profile image
comforx • Edited

You could check the "tabs" component in Vimesh Headless UI ( github.com/vimeshjs/vimesh-headless ), an alpinejs alternative of Tailwind Headless UI.