Build a tab component using Alpine.js
Tags: javascript, tutorial, alpinejs
Published: 2022-08-04 06:50:49

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:

```html
<!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:

```html
<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:

```html
<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:

```html
<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](https://alpinejs.dev/).