Tabs

Line Tabs

To use a custom Line Tabs style just add .nav-line-tabsclass as shown below:

Et et consectetur ipsum labore excepteur est proident excepteur ad velit occaecat qui minim occaecat veniam. Fugiat veniam incididunt anim aliqua enim pariatur veniam sunt est aute sit dolor anim. Velit non irure adipisicing aliqua ullamco irure incididunt irure non esse consectetur nostrud minim non minim occaecat. Amet duis do nisi duis veniam non est eiusmod tempor incididunt tempor dolor ipsum in qui sit.

Nulla est ullamco ut irure incididunt nulla Lorem Lorem minim irure officia enim reprehenderit. Magna duis labore cillum sint adipisicing exercitation ipsum. Nostrud ut anim non exercitation velit laboris fugiat cupidatat. Commodo esse dolore fugiat sint velit ullamco magna consequat voluptate minim amet aliquip ipsum aute laboris nisi. Labore labore veniam irure irure ipsum pariatur mollit magna in cupidatat dolore magna irure esse tempor ad mollit. Dolore commodo nulla minim amet ipsum officia consectetur amet ullamco voluptate nisi commodo ea sit eu.

Sint sit mollit irure quis est nostrud cillum consequat Lorem esse do quis dolor esse fugiat sunt do. Eu ex commodo veniam Lorem aliquip laborum occaecat qui Lorem esse mollit dolore anim cupidatat. eserunt officia id Lorem nostrud aute id commodo elit eiusmod enim irure amet eiusmod qui reprehenderit nostrud tempor. Fugiat ipsum excepteur in aliqua non et quis aliquip ad irure in labore cillum elit enim. Consequat aliquip incididunt ipsum et minim laborum laborum laborum et cillum labore. Deserunt adipisicing cillum id nulla minim nostrud labore eiusmod et amet.

<!--begin::tabs-->
<ul class="nav nav-tabs nav-line-tabs mb-5 fs-6">
<li class="nav-item">
<a class="nav-link active" data-bs-toggle="tab" href="#kt_tab_pane_1">Link 1</a>
</li>
<li class="nav-item">
<a class="nav-link" data-bs-toggle="tab" href="#kt_tab_pane_2">Link 2</a>
</li>
<li class="nav-item">
<a class="nav-link" data-bs-toggle="tab" href="#kt_tab_pane_3">Link 3</a>
</li>
</ul>

<div class="tab-content" id="myTabContent">
<div class="tab-pane fade show active" id="kt_tab_pane_1" role="tabpanel">...</div>
<div class="tab-pane fade" id="kt_tab_pane_2" role="tabpanel">...</div>
<div class="tab-pane fade" id="kt_tab_pane_3" role="tabpanel">...</div>
</div>
<!--end::tabs-->

Scrollable Tabs

To use a custom Line Tabs style just add .nav-line-tabsclass as shown below:

<!--begin::tabs-->
<div class="mb-5 hover-scroll-x">
<div class="d-grid">
<ul class="nav nav-tabs flex-nowrap text-nowrap" role="tablist">
<li class="nav-item" role="presentation">
<a class="nav-link active btn btn-active-secondary" data-bs-toggle="tab" href="#kt_tab_pane_11" aria-selected="true" role="tab">Long Link 1</a>
</li>
<li class="nav-item" role="presentation">
<a class="nav-link btn btn-active-secondary" data-bs-toggle="tab" href="#kt_tab_pane_12" aria-selected="false" role="tab" tabindex="-1">Long Link 1</a>
</li>
<li class="nav-item" role="presentation">
<a class="nav-link btn btn-active-secondary" data-bs-toggle="tab" href="#kt_tab_pane_13" aria-selected="false" role="tab" tabindex="-1">Long Link 1</a>
</li>
</ul>
</div>
</div>

<div class="tab-content" id="myTabContent">
<div class="tab-pane fade show active" id="kt_tab_pane_11" role="tabpanel">...</div>
<div class="tab-pane fade" id="kt_tab_pane_12" role="tabpanel">...</div>
<div class="tab-pane fade" id="kt_tab_pane_13" role="tabpanel">...</div>
</div>
<!--end::tabs-->

Vertical Tabs

To use a custom Vertical Tabs style just add .flex-columnclass as shown below:

<!--begin::tabs-->
<ul class="nav nav-tabs nav-pills border-0 flex-row flex-md-column me-5 mb-3 mb-md-0 fs-6">
<li class="nav-item w-md-200px me-0">
<a class="nav-link active" data-bs-toggle="tab" href="#kt_vtab_pane_V1">Link 1</a>
</li>
<li class="nav-item w-md-200px me-0">
<a class="nav-link" data-bs-toggle="tab" href="#kt_vtab_pane_V2">Link 2</a>
</li>
<li class="nav-item w-md-200px">
<a class="nav-link" data-bs-toggle="tab" href="#kt_vtab_pane_V3">Link 3</a>
</li>
</ul>
<div class="tab-content" id="myTabContent">
<div class="tab-pane fade show active" id="kt_vtab_pane_V1" role="tabpanel">...</div>
<div class="tab-pane fade" id="kt_vtab_pane_V2" role="tabpanel">...</div>
<div class="tab-pane fade" id="kt_vtab_pane_V3" role="tabpanel">...</div>
</div>
<!--end::tabs-->

Rich Content Vertical Tabs

Vertical tabs can support rich content such as icons with ease by adding btnclasses to .nav-link.

                  
                  <!--begin::tabs-->
                  <ul class="nav nav-tabs nav-pills flex-row border-0 flex-md-column me-5 mb-3 mb-md-0 fs-6 min-w-lg-200px" role="tablist">
                  <li class="nav-item w-100 me-0 mb-md-2" role="presentation">
                  <a class="nav-link w-100 btn btn-flex btn-active-light-primary active" data-bs-toggle="tab" href="#kt_vtab_pane_R1" aria-selected="false" role="tab" tabindex="-1">
                  <span class="me-4"><i class="far fa-envelope fs-2x"></i></span>
                  <span class="d-flex flex-column align-items-start">
                  <span class="fs-4 fw-bold">Link 1</span>
                  <span class="fs-7">Description</span> </span> </a>
                  </li>
                  <li class="nav-item w-100 me-0 mb-md-2" role="presentation">
                  <a class="nav-link w-100 btn btn-flex btn-active-light-primary" data-bs-toggle="tab" href="#kt_vtab_pane_R2" aria-selected="false" role="tab" tabindex="-1">
                  <span class="me-4"><i class="far fa-address-card fs-2x"></i></span>
                  <span class="d-flex flex-column align-items-start"> <span class="fs-4 fw-bold">Link 2</span>
                  <span class="fs-7">Description</span> </span> </a>
                  </li>
                  <li class="nav-item w-100" role="presentation">
                  <a class="nav-link w-100 btn btn-flex btn-active-light-primary" data-bs-toggle="tab" href="#kt_vtab_pane_R3" aria-selected="true" role="tab">
                  <span class="me-4"><i class="far fa-copy fs-2x"></i></span>
                  <span class="d-flex flex-column align-items-start">
                  <span class="fs-4 fw-bold">Link 3</span> <span class="fs-7">Description</span> </span> </a>
                  </li>
                  </ul>

                  <div class="tab-content" id="myTabContent">
                  <div class="tab-pane fade show active" id="kt_vtab_pane_R1" role="tabpanel">...</div>
                  <div class="tab-pane fade" id="kt_vtab_pane_R2" role="tabpanel">...</div>
                  <div class="tab-pane fade" id="kt_vtab_pane_R3" role="tabpanel">...</div>
                  </div>
                  <!--end::tabs-->