Tabs

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.

Join 23000+ others and subscribe to our newsletter!