Bootstrap Navs component with a variety of options to provide unique looking Line Tab components that matches Metronic's design standards.
<div class="card card-custom">
<div class="card-header card-header-tabs-line">
<div class="card-title">
<h3 class="card-label">Card Title</h3>
</div>
<div class="card-toolbar">
<ul class="nav nav-tabs nav-bold nav-tabs-line">
<li class="nav-item">
<a class="nav-link active" data-toggle="tab" href="#kt_tab_pane_1_2">Week</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#kt_tab_pane_2_2">Month</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Year</a>
<div class="dropdown-menu dropdown-menu-sm dropdown-menu-right">
<a class="dropdown-item" data-toggle="tab" href="#kt_tab_pane_3_2">Action</a>
<a class="dropdown-item" data-toggle="tab" href="#kt_tab_pane_3_2">Another action</a>
<a class="dropdown-item" data-toggle="tab" href="#kt_tab_pane_3_2">Something else here</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" data-toggle="tab" href="#kt_tab_pane_3_2">Separated link</a>
</div>
</li>
</ul>
</div>
</div>
<div class="card-body">
<div class="tab-content">
<div class="tab-pane fade show active" id="kt_tab_pane_1_2" role="tabpanel">
...
</div>
<div class="tab-pane fade" id="kt_tab_pane_2_2" role="tabpanel">
...
</div>
<div class="tab-pane fade" id="kt_tab_pane_3_2" role="tabpanel">
...
</div>
</div>
</div>
</div>
<div class="card card-custom">
<div class="card-header card-header-tabs-line">
<div class="card-title">
<h3 class="card-label">Card Title With Icons</h3>
</div>
<div class="card-toolbar">
<ul class="nav nav-tabs nav-bold nav-tabs-line">
<li class="nav-item">
<a class="nav-link active" data-toggle="tab" href="#kt_tab_pane_1_3">
<span class="nav-icon"><i class="flaticon2-chat-1"></i></span>
<span class="nav-text">Week</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#kt_tab_pane_2_3">
<span class="nav-icon"><i class="flaticon2-drop"></i></span>
<span class="nav-text">Month</span>
</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
<span class="nav-icon"><i class="flaticon2-gear"></i></span>
<span class="nav-text">Year</span>
</a>
<div class="dropdown-menu dropdown-menu-sm dropdown-menu-right">
<a class="dropdown-item" data-toggle="tab" href="#kt_tab_pane_3_3">Action</a>
<a class="dropdown-item" data-toggle="tab" href="#kt_tab_pane_3_3">Another action</a>
<a class="dropdown-item" data-toggle="tab" href="#kt_tab_pane_3_3">Something else here</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" data-toggle="tab" href="#kt_tab_pane_3_3">Separated link</a>
</div>
</li>
</ul>
</div>
</div>
<div class="card-body">
<div class="tab-content">
<div class="tab-pane fade show active" id="kt_tab_pane_1_3" role="tabpanel" aria-labelledby="kt_tab_pane_1_3">
...
</div>
<div class="tab-pane fade" id="kt_tab_pane_2_3" role="tabpanel" aria-labelledby="kt_tab_pane_2_3">
...
</div>
<div class="tab-pane fade" id="kt_tab_pane_3_3" role="tabpanel" aria-labelledby="kt_tab_pane_3_3">
...
</div>
</div>
</div>
</div>
<div class="card card-custom">
<div class="card-header card-header-tabs-line">
<div class="card-toolbar">
<ul class="nav nav-tabs nav-bold nav-tabs-line">
<li class="nav-item">
<a class="nav-link active" data-toggle="tab" href="#kt_tab_pane_1_4">
<span class="nav-icon"><i class="flaticon2-chat-1"></i></span>
<span class="nav-text">Week</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#kt_tab_pane_2_4">
<span class="nav-icon"><i class="flaticon2-drop"></i></span>
<span class="nav-text">Month</span>
</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
<span class="nav-icon"><i class="flaticon2-gear"></i></span>
<span class="nav-text">Year</span>
</a>
<div class="dropdown-menu dropdown-menu-sm dropdown-menu-left">
<a class="dropdown-item" data-toggle="tab" href="#kt_tab_pane_3_4">Action</a>
<a class="dropdown-item" data-toggle="tab" href="#kt_tab_pane_3_4">Another action</a>
<a class="dropdown-item" data-toggle="tab" href="#kt_tab_pane_3_4">Something else here</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" data-toggle="tab" href="#kt_tab_pane_3_4">Separated link</a>
</div>
</li>
</ul>
</div>
<div class="card-toolbar">
<div class="dropdown dropdown-inline">
<button type="button" class="btn btn-hover-light-primary btn-icon btn-sm" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="ki ki-bold-more-hor "></i>
</button>
<div class="dropdown-menu dropdown-menu-sm dropdown-menu-right">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</div>
</div>
</div>
<div class="card-body">
<div class="tab-content">
<div class="tab-pane fade show active" id="kt_tab_pane_1_4" role="tabpanel" aria-labelledby="kt_tab_pane_1_4">
...
</div>
<div class="tab-pane fade" id="kt_tab_pane_2_4" role="tabpanel" aria-labelledby="kt_tab_pane_2_4">
...
</div>
<div class="tab-pane fade" id="kt_tab_pane_3_4" role="tabpanel" aria-labelledby="kt_tab_pane_3_4">
...
</div>
</div>
</div>
</div>
<div class="card card-custom">
<div class="card-header">
<div class="card-title">
<h3 class="card-label">Card Title</h3>
</div>
<div class="card-toolbar">
<ul class="nav nav-bold nav-pills">
<li class="nav-item">
<a class="nav-link active" data-toggle="tab" href="#kt_tab_pane_7_1">Week</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#kt_tab_pane_7_2">Month</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
Year
</a>
<div class="dropdown-menu dropdown-menu-sm dropdown-menu-right">
<a class="dropdown-item" data-toggle="tab" href="#kt_tab_pane_7_3">Action</a>
<a class="dropdown-item" data-toggle="tab" href="#kt_tab_pane_7_3">Another action</a>
<a class="dropdown-item" data-toggle="tab" href="#kt_tab_pane_7_3">Something else here</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" data-toggle="tab" href="#kt_tab_pane_7_3">Separated link</a>
</div>
</li>
</ul>
</div>
</div>
<div class="card-body">
<div class="tab-content">
<div class="tab-pane fade show active" id="kt_tab_pane_7_1" role="tabpanel" aria-labelledby="kt_tab_pane_7_1">
...
</div>
<div class="tab-pane fade" id="kt_tab_pane_7_2" role="tabpanel" aria-labelledby="kt_tab_pane_7_2">
...
</div>
<div class="tab-pane fade" id="kt_tab_pane_7_3" role="tabpanel" aria-labelledby="kt_tab_pane_7_3">
...
</div>
</div>
</div>
</div>
<div class="card card-custom">
<div class="card-header">
<div class="card-title">
<h3 class="card-label">Card Title With Icons</h3>
</div>
<div class="card-toolbar">
<ul class="nav nav-light-success nav-bold nav-pills">
<li class="nav-item">
<a class="nav-link active" data-toggle="tab" href="#kt_tab_pane_4_1">
<span class="nav-icon"><i class="flaticon2-chat-1"></i></span>
<span class="nav-text">Week</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#kt_tab_pane_4_2">
<span class="nav-icon"><i class="flaticon2-drop"></i></span>
<span class="nav-text">Month</span>
</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
<span class="nav-icon"><i class="flaticon2-gear"></i></span>
<span class="nav-text">Year</span>
</a>
<div class="dropdown-menu dropdown-menu-sm dropdown-menu-right">
<a class="dropdown-item" data-toggle="tab" href="#kt_tab_pane_4_3">Action</a>
<a class="dropdown-item" data-toggle="tab" href="#kt_tab_pane_4_3">Another action</a>
<a class="dropdown-item" data-toggle="tab" href="#kt_tab_pane_4_3">Something else here</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" data-toggle="tab" href="#kt_tab_pane_4_3">Separated link</a>
</div>
</li>
</ul>
</div>
</div>
<div class="card-body">
<div class="tab-content">
<div class="tab-pane fade show active" id="kt_tab_pane_4_1" role="tabpanel" aria-labelledby="kt_tab_pane_4_1">
...
</div>
<div class="tab-pane fade" id="kt_tab_pane_4_2" role="tabpanel" aria-labelledby="kt_tab_pane_4_2">
...
</div>
<div class="tab-pane fade" id="kt_tab_pane_4_3" role="tabpanel" aria-labelledby="kt_tab_pane_4_3">
...
</div>
</div>
</div>
</div>
<div class="card card-custom">
<div class="card-header">
<div class="card-toolbar">
<ul class="nav nav-light-danger nav-bold nav-pills">
<li class="nav-item">
<a class="nav-link active" data-toggle="tab" href="#kt_tab_pane_5_1">
<span class="nav-icon"><i class="flaticon2-chat-1"></i></span>
<span class="nav-text">Week</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#kt_tab_pane_5_2">
<span class="nav-icon"><i class="flaticon2-drop"></i></span>
<span class="nav-text">Month</span>
</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
<span class="nav-icon"><i class="flaticon2-gear"></i></span>
<span class="nav-text">Year</span>
</a>
<div class="dropdown-menu">
<a class="dropdown-item" data-toggle="tab" href="#kt_tab_pane_5_3">Action</a>
<a class="dropdown-item" data-toggle="tab" href="#kt_tab_pane_5_3">Another action</a>
<a class="dropdown-item" data-toggle="tab" href="#kt_tab_pane_5_3">Something else here</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" data-toggle="tab" href="#kt_tab_pane_5_3">Separated link</a>
</div>
</li>
</ul>
</div>
<div class="card-toolbar">
<div class="dropdown dropdown-inline">
<button type="button" class="btn btn-hover-light-primary btn-icon btn-sm" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="ki ki-bold-more-hor "></i>
</button>
<div class="dropdown-menu dropdown-menu-sm dropdown-menu-right">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</div>
</div>
</div>
<div class="card-body">
<div class="tab-content">
<div class="tab-pane fade show active" id="kt_tab_pane_5_1" role="tabpanel" aria-labelledby="kt_tab_pane_5_1">
...
</div>
<div class="tab-pane fade" id="kt_tab_pane_5_2" role="tabpanel" aria-labelledby="kt_tab_pane_5_2">
...
</div>
<div class="tab-pane fade" id="kt_tab_pane_5_3" role="tabpanel" aria-labelledby="kt_tab_pane_5_3">
...
</div>
</div>
</div>
</div>
