Tab

Content tab 1
Content tab 2
Content tab 3
<ul class="k-tabs">
    <li class="k-is-active">
        <a href="#tab1" data-k-toggle="tab">Tab 1</a>
    </li>
    <li>
        <a href="#tab2" data-k-toggle="tab">Tab 2</a>
    </li>
     <li class="k-is-disabled">
        <a href="#tab3" data-k-toggle="tab">Tab 3 (disabled)</a>
    </li>
</ul>
<div class="k-tabs-content">
    <div id="tab1" class="k-tab k-is-active">
        Content tab 1
    </div>
    <div id="tab2" class="k-tab">
        Content tab 2
    </div>
    <div id="tab3" class="k-tab">
        Content tab 3
    </div>
</div>

Scrolling tabs

  • When the amount of tabs might not fit in your screen, it’s possible to use scrolling tabs
  • Also useful if the tabs might not fit on smaller screens like mobile
Content tab 1
Content tab 2
Content tab 3
Content tab 4
Content tab 5
Content tab 6
Content tab 7
Content tab 8
Content tab 9
Content tab 10
<div class="k-component">
    <div class="k-tabs-container">
        <div class="k-tabs-wrapper k-js-tabs-wrapper">
            <div class="k-tabs-scroller k-js-tabs-scroller">
                <ul class="k-tabs k-js-tabs">
                    <li class="k-is-active">
                        <a href="#tab1b" data-k-toggle="tab">Tab 1</a>
                    </li>
                    <li>
                        <a href="#tab2b" data-k-toggle="tab">Tab 2</a>
                    </li>
                    <li>
                        <a href="#tab3b" data-k-toggle="tab">Tab 3</a>
                    </li>
                    <li>
                        <a href="#tab4b" data-k-toggle="tab">Tab 4</a>
                    </li>
                    <li>
                        <a href="#tab5b" data-k-toggle="tab">Tab 5</a>
                    </li>
                    <li>
                        <a href="#tab6b" data-k-toggle="tab">Tab 6</a>
                    </li>
                    <li>
                        <a href="#tab7b" data-k-toggle="tab">Tab 7</a>
                    </li>
                    <li>
                        <a href="#tab8b" data-k-toggle="tab">Tab 8</a>
                    </li>
                    <li>
                        <a href="#tab9b" data-k-toggle="tab">Tab 9</a>
                    </li>
                    <li>
                        <a href="#tab10b" data-k-toggle="tab">Tab 10</a>
                    </li>
                </ul>
            </div>
        </div>
        <div class="k-tabs-content">
            <div id="tab1b" class="k-tab k-is-active">
                <div class="k-container">
                    <div class="k-container__full">
                        Content tab 1
                    </div>
                </div>
            </div>
            <div id="tab2b" class="k-tab">
                <div class="k-container">
                    <div class="k-container__full">
                        Content tab 2
                    </div>
                </div>
            </div>
            <div id="tab3b" class="k-tab">
                <div class="k-container">
                    <div class="k-container__full">
                        Content tab 3
                    </div>
                </div>
            </div>
            <div id="tab4b" class="k-tab">
                <div class="k-container">
                    <div class="k-container__full">
                        Content tab 4
                    </div>
                </div>
            </div>
            <div id="tab5b" class="k-tab">
                <div class="k-container">
                    <div class="k-container__full">
                        Content tab 5
                    </div>
                </div>
            </div>
            <div id="tab6b" class="k-tab">
                <div class="k-container">
                    <div class="k-container__full">
                        Content tab 6
                    </div>
                </div>
            </div>
            <div id="tab7b" class="k-tab">
                <div class="k-container">
                    <div class="k-container__full">
                        Content tab 7
                    </div>
                </div>
            </div>
            <div id="tab8b" class="k-tab">
                <div class="k-container">
                    <div class="k-container__full">
                        Content tab 8
                    </div>
                </div>
            </div>
            <div id="tab9b" class="k-tab">
                <div class="k-container">
                    <div class="k-container__full">
                        Content tab 9
                    </div>
                </div>
            </div>
            <div id="tab10b" class="k-tab">
                <div class="k-container">
                    <div class="k-container__full">
                        Content tab 10
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Loader in tab

See loader molecule

Need Help?

Let our developers personally assist you. You can ask development related questions in our Support Center. Only for Business or Agency subscribers.