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
<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.