> For the complete documentation index, see [llms.txt](https://docs.polarity.io/integrations/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.polarity.io/integrations/recipes/creating-a-tabbed-interface.md).

# Creating a Tabbed Interface

You can implement a tabbed interface within the details block of your integration to better organize information.  To start, you will setup the tab structure in your handlebars template.  For this example we will create two tabs called `Info` and `Comments`.

{% code title="template.hbs" %}

```markup
<ul class="nav nav-tabs">
    <li class="nav-item">
        <a class="nav-link href="#">
            Info
        </a>
    </li>
    <li class="nav-item">
        <a class="nav-link href="#">
            Comments
        </a>
    </li>
</ul>
```

{% endcode %}

{% hint style="info" %}
The HTML structure for the tabs makes use of Bootstrap tabs. You can find more information here <https://getbootstrap.com/docs/4.1/components/navs/#tabs>
{% endhint %}

Now that our tabs are in place we will need to trigger an action when the tab is clicked.  We will trigger an action called `changeTab` and pass the name of the tab that we want to change to.

{% code title="template.hbs" %}

```markup
<ul class="nav nav-tabs">
    <li class="nav-item">
        <a {{action "changeTab" "info"}} class="nav-link" href="#">
            Info
        </a>
    </li>
    <li class="nav-item">
        <a {{action "changeTab" "comments"}} class="nav-link" href="#">
            Comments
        </a>
    </li>
</ul>
```

{% endcode %}

The action itself will be implemented in the `actions` hash of our component file.  The action when called will set a variable called `activeTab` to the tab that was clicked on.  We also initialize the `activeTab` variable to the name of the tab we want to start as active.

```javascript
polarity.export = PolarityComponent.extend({
    activeTab: 'info',
    actions: {
        changeTab: function(tabName) {
          this.set('activeTab', tabName);
        }
    }
})
```

We can now use the `activeTab` variable in our handlebars template to set the `active` class on the tab that is currently active.

{% code title="template.hbs" %}

```markup
<ul class="nav nav-tabs">
    <li class="nav-item">
        <a {{action "changeTab" "info"}} class="nav-link {{if (eq activeTab "info") "active"}}" href="#">
            Info
        </a>
    </li>
    <li class="nav-item">
        <a {{action "changeTab" "comments"}} class="nav-link {{if (eq activeTab "comments") "active"}}" href="#">
            Comments
        </a>
    </li>
</ul>
```

{% endcode %}

We're making use of the `eq` [truth helper](/integrations/build-an-integration/customizing-the-overlay-window/templates/built-in-helpers.md#truth-helpers) to set the `active` class when the `activeTab` variable is equal to our tab name.

Finally, we use conditionals to only show content when the appropriate tab is active.

{% code title="template.hbs" %}

```markup
{{#if (eq activeTab "info")}}
    <h1>Info</h1>
{{/if}}
{{#if (eq activeTab "comments")}}
    <h1>Comments</h1>
{{/if}}
```

{% endcode %}

When the user clicks on the "Info" tab, it triggers the `changeTab` action which will set the `activeTab` to the value `info`.  This in turn will show the content within the "Info" conditional block.  Likewise, when the user clicks on the "Comments" tab the `activeTab` value will be set to `comments` and the "Comments" tab content will be shown.