Custom Page - Tabs

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

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

To enable it, visit Settings -> Custom Page, copy and paste the following into the development tab as shown in the video below the code snippet.

<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: 06/08/2022