> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://help.puppetvendors.com/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# How to create tabbed content in the vendor custom page

This article demonstrates how you can add multiple tabbed content on the custom page.

###### Article Content

1. [Common use cases for adding custom tabs](#6-common-use-cases-for-adding-custom-tabs)
2. [How to enable custom tabs](#6-how-to-enable-custom-tabs)
3. [How to add tab content (video recording)](#6-how-to-add-tab-content-video-recording)


###### Common use cases for adding custom tabs

The custom tab page helps you segment different messages that you would like to communicate with your vendors, ranging from

* How to request for payouts
* How to use the portal
* How to fulfill an order

###### How to enable custom tabs

To enable this, go to **Settings > Communications > Custom Page**, click on the code icon at the top right of the text editor. Copy and paste the code snippet into the development tab, following the steps shown in the video.

```
<style>
    ul#switcher li.uk-active{
        background: #f5f5f5;
        border-right: 3px solid;
    }
</style>
<div class="uk-grid">
    <div class="uk-width-1-5@s">
        <ul id="switcher" class="uk-nav uk-nav-default">
            <li><a href="#">Tab 1 - Title</a></li>
            <li><a href="#">Tab 2 - Title</a></li>
            <li><a href="#">Tab 3 - Title</a></li>
        </ul>
    </div>
    <div class="uk-width-expand@m">
        <ul id="component-nav" class="uk-switcher">
            <li>Tab 1 - Content</li>
            <li>Tab 2 - Content</li>
            <li>Tab 3 - Content</li>
        </ul>
    </div>
</div>
<script>
    UIkit.switcher('#switcher', {connect: '#component-nav', animation: 'uk-animation-fade'});
</script>
```


###### How to add tab content (video recording)

${frame}[How to add tab content](https://www.loom.com/embed/0fd414df6a034915a1f2c7b842846eb8)