Articles on: Getting Started

Creating Custom Page - Tabs

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.

        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: 01/12/2023

Was this article helpful?

Share your feedback


Thank you!