How to create tabbed content in the vendor custom page

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

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

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>

Updated on: 25/11/2024