How to create tabbed content on the vendor custom page

This shows how you can add multiple tab content on the custom page

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

To enable this, go to Settings > Custom Page, 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: 30/01/2024