Add "Tabs" to your app

In this article, we'll be going over how to create tabs for your web application using a front-end framework called Materializecss (


This is how our end result will look.




To start we'll need to include the framework in the custom header and footer code of our Tadabase app.

Copy and paste the following in the Custom Header Code Section
.tab-col {
    margin: 0 15px;
.tabs {
    position: relative;
    overflow-x: auto;
    overflow-y: hidden;
    height: 48px;
    width: 100%;
    background-color: #fff;
    margin: 25px auto 0 auto;
    white-space: nowrap;
    text-align: center;
    border: none;
    border-radius: 10px;
    box-shadow: 0 0 20px rgb(8 21 66 / 5%);
    z-index: 99;

.tabs .tab {
    display: inline-block;
    text-align: center;
    line-height: 48px;
    height: 48px;
    padding: 0;
    margin: 0;
    text-transform: uppercase;

.tabs .tab a {
    color: #8b8b8b;
    display: block;
    width: 100%;
    height: 100%;
    padding: 0 24px;
    font-size: 14px;
    text-overflow: ellipsis;
    overflow: hidden;

.tabs .tab a:focus,
.tabs .tab {
    background-color: none !important;
    outline: none;
    color: #0128FF;
    font-weight: 700;
    text-decoration: none;

.tabs .tab a:hover {
    background-color: transparent;
    color: #0128FF;
    text-decoration: none;

.tabs .indicator {
    position: absolute;
    bottom: 0;
    height: 2px;
    background-color: #0128FF;
    will-change: left, right;

@media only screen and (max-width : 992px) {
    .tabs {
        display: flex;

    .tabs .tab {
        flex-grow: 1;

    .tabs .tab a {
        padding: 0;

    ul {
        padding-inline-start: 0;

Copy and paste the following into the Custom Footer Code section

<script src=""></script>


Next, we'll need to add the following to the source code of an HTML component on the page builder

<div class="row">
    <div class="col s12 tab-col">
        <ul class="tabs">
            <li class="tab col s3"><a class="active" href="#test1">Test 1</a></li>
            <li class="tab col s3"><a href="#test2">Test 2</a></li>
            <li class="tab col s3"><a href="#test3">Test 3</a></li>
            <li class="tab col s3"><a href="#test4">Test 4</a></li>
    <div id="test1" class="col s12">&nbsp;</div>
    <div id="test2" class="col s12">&nbsp;</div>
    <div id="test3" class="col s12">&nbsp;</div>
    <div id="test4" class="col s12">&nbsp;</div>



For this example, we'll be placing three tables into three of the tabs.

To do this, we'll need to add a CSS Class to each of the rows the tables are in.

As you can see in the image below, we have three rows that each contains a Data Table



To add a CSS class to each row, click on Edit

Then select "Design" and then "CSS" and add a CSS Class

Repeat that process until you've defined a unique CSS Class for each row.


Next, we'll add the following JavaScript to the page

Remember to replace the Classes shown in this example with the CSS Classes you added to each row.