tabs

Overview

Metronic customizes the Bootstrap Tabs through the SASS variables in src/sass/components/_variables.scss and adds additonal options in src/sass/components/_nav.scss.

Line Tabs

To use a custom Line Tabs style just add .nav-line-tabs class 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.

html

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

Line Tabs 2x

Add .nav-line-tabs-2x class to us a line tab with 2px border width:

html

<ul class="nav nav-tabs nav-line-tabs nav-line-tabs-2x mb-5 fs-6">
    <li class="nav-item">
        <a class="nav-link active" data-bs-toggle="tab" href="#kt_tab_pane_4">Link 1</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" data-bs-toggle="tab" href="#kt_tab_pane_5">Link 2</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" data-bs-toggle="tab" href="#kt_tab_pane_6">Link 3</a>
    </li>
</ul>

<div class="tab-content" id="myTabContent">
    <div class="tab-pane fade show active" id="kt_tab_pane_4" role="tabpanel">
        ...
    </div>
    <div class="tab-pane fade" id="kt_tab_pane_5" role="tabpanel">
        ...
    </div>
    <div class="tab-pane fade" id="kt_tab_pane_6" role="tabpanel">
        ...
    </div>
</div>

Tabs with Dropdowns

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

html

<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_7">Link 1</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" data-bs-toggle="tab" href="#kt_tab_pane_8">Link 2</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" data-bs-toggle="tab" href="#kt_tab_pane_9">Link 3</a>
    </li>
    <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-expanded="false">Dropdown</a>
        <ul class="dropdown-menu">
            <li><a class="nav-link dropdown-item" data-bs-toggle="tab" href="#kt_tab_pane_10">Action</a></li>
        </ul>
    </li>
</ul>

<div class="tab-content" id="myTabContent">
    <div class="tab-pane fade show active" id="kt_tab_pane_7" role="tabpanel">
        ...
    </div>
    <div class="tab-pane fade" id="kt_tab_pane_8" role="tabpanel">
        ...
    </div>
    <div class="tab-pane fade" id="kt_tab_pane_9" role="tabpanel">
        ...
    </div>
    <div class="tab-pane fade show active" id="kt_tab_pane_10" role="tabpanel">
        ...
    </div>
    <div class="tab-pane fade" 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>

Card Tabs

Add .nav-stretch class to use line tabs in card header:

Title

html

<div class="card ">
    <div class="card-header card-header-stretch">
        <h3 class="card-title">Title</h3>
        <div class="card-toolbar">
            <ul class="nav nav-tabs nav-line-tabs nav-stretch fs-6 border-0">
                <li class="nav-item">
                    <a class="nav-link active" data-bs-toggle="tab" href="#kt_tab_pane_7">Link 1</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" data-bs-toggle="tab" href="#kt_tab_pane_8">Link 2</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" data-bs-toggle="tab" href="#kt_tab_pane_9">Link 3</a>
                </li>
            </ul>
        </div>
    </div>
    <div class="card-body">
        <div class="tab-content" id="myTabContent">
            <div class="tab-pane fade show active" id="kt_tab_pane_7" role="tabpanel">
                ....
            </div>

            <div class="tab-pane fade" id="kt_tab_pane_8" role="tabpanel">
                ...
            </div>

            <div class="tab-pane fade" id="kt_tab_pane_9" role="tabpanel">
                ...
            </div>
        </div>
    </div>
</div>

Scrollable Tabs

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

html

<div class="mb-5 hover-scroll-x">
    <div class="d-grid">
        <ul class="nav nav-tabs flex-nowrap text-nowrap">
            <li class="nav-item">
                <a class="nav-link btn btn-active-light btn-color-gray-600 btn-active-color-primary rounded-bottom-0" data-bs-toggle="tab" href="#kt_tab_pane_1">Long Link 1</a>
            </li>
            <li class="nav-item">
                <a class="nav-link btn btn-active-light btn-color-gray-600 btn-active-color-primary rounded-bottom-0" data-bs-toggle="tab" href="#kt_tab_pane_1">Long Link 2</a>
            </li>
            ...
        </ul>
    </div>
</div>

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

Vertical Tabs

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

html

<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_1">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_2">Link 2</a>
    </li>
    <li class="nav-item w-md-200px">
        <a class="nav-link" data-bs-toggle="tab" href="#kt_vtab_pane_3">Link 3</a>
    </li>
</ul>

Rich Content Vertical Tabs

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

html

<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">
    <li class="nav-item w-100 me-0 mb-md-2">
        <a class="nav-link w-100 active btn btn-flex btn-active-light-success" data-bs-toggle="tab" href="#kt_vtab_pane_4">
            <span class="svg-icon fs-2"><svg>...</svg></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">
        <a class="nav-link w-100 btn btn-flex btn-active-light-info" data-bs-toggle="tab" href="#kt_vtab_pane_5">
            <span class="svg-icon fs-2"><svg>...</svg></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">
        <a class="nav-link w-100 btn btn-flex btn-active-light-danger" data-bs-toggle="tab" href="#kt_vtab_pane_6">
            <span class="svg-icon fs-2"><svg>...</svg></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>