Articles on: Getting Started

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.

        background: #f5f5f5;
        border-right: 3px solid;
<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>
    <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>
    UIkit.switcher('#switcher', {connect: '#component-nav', animation: 'uk-animation-fade'});


Updated on: 06/08/2022

Was this article helpful?

Share your feedback


Thank you!