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
2. How to enable custom tabs
3. 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 > 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)

Updated on: 24/09/2025