Bootstrap Navscomponent with a variety of options to provide unique looking Line Tab components that matches Metronic's design standards.
Use
.navand
.nav-tabswith
nav-tabs-lineclass to have custom line tab component.
<ul class="nav nav-tabs nav-tabs-line">
<li class="nav-item">
<a class="nav-link active" data-toggle="tab" href="#kt_tab_pane_1">Active</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#kt_tab_pane_2">Link</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">
Dropdown
</a>
<div class="dropdown-menu">
<a class="dropdown-item" data-toggle="tab" href="#kt_tab_pane_3">Action</a>
<a class="dropdown-item" data-toggle="tab" href="#kt_tab_pane_3">Another action</a>
<a class="dropdown-item" data-toggle="tab" href="#kt_tab_pane_3">Something else here</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" data-toggle="tab" href="#kt_tab_pane_3">Separated link</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link disabled" data-toggle="tab" href="#kt_tab_pane_4" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
<div class="tab-content mt-5" id="myTabContent">
<div class="tab-pane fade show active" id="kt_tab_pane_1" role="tabpanel" aria-labelledby="kt_tab_pane_2">Tab content 1</div>
<div class="tab-pane fade" id="kt_tab_pane_2" role="tabpanel" aria-labelledby="kt_tab_pane_2">Tab content 2</div>
<div class="tab-pane fade" id="kt_tab_pane_3" role="tabpanel" aria-labelledby="kt_tab_pane_3">Tab content 4</div>
<div class="tab-pane fade" id="kt_tab_pane_4" role="tabpanel" aria-labelledby="kt_tab_pane_4">Tab content 5</div>
</div>
Use
.nav-semi-bold,
.nav-bold,
.nav-bolderand
.nav-boldestclasses to set font weight of navigation links.
<ul class="nav nav-tabs nav-tabs-line nav-semi-bold">
...
</ul>
<ul class="nav nav-tabs nav-tabs-line nav-bold">
...
</ul>
<ul class="nav nav-tabs nav-tabs-line nav-bolder">
...
</ul>
<ul class="nav nav-tabs nav-tabs-line nav-boldest">
...
</ul>
Change the horizontal alignment of your nav with
flexbox utilities. By default, navs are left-aligned, but easily modified to be centered or right aligned.
Centered with
.justify-content-center.
<ul class="nav nav-tabs nav-tabs-line justify-content-center">
...
</ul>
Right-aligned with
.justify-content-end.
<ul class="nav nav-tabs nav-tabs-line justify-content-end">
...
</ul>
Use
.card-headerwith
.card-header-tabs-lineto have card line tabs.
<div class="card card-custom gutter-b">
<div class="card-header card-header-tabs-line">
<div class="card-title">
<h3 class="card-label">Card Line Tabs</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">
<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" aria-labelledby="kt_tab_pane_2">
...
</div>
<div class="tab-pane fade" id="kt_tab_pane_2_2" role="tabpanel" aria-labelledby="kt_tab_pane_2">
...
</div>
<div class="tab-pane fade" id="kt_tab_pane_3_2" role="tabpanel" aria-labelledby="kt_tab_pane_3">
...
</div>
</div>
</div>
</div>
<div class="card card-custom gutter-b">
<div class="card-header card-header-tabs-line">
<div class="card-title">
<h3 class="card-label">Card Line Tabs 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">
<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 gutter-b">
<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">
<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-more-hor"></i>
</button>
<div class="dropdown-menu dropdown-menu-sm">
<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>
Use tabs with font icons.
<ul class="nav nav-tabs nav-tabs-line mb-5">
<li class="nav-item">
<a class="nav-link active" data-toggle="tab" href="#kt_tab_pane_1">
<span class="nav-icon"><i class="flaticon2-chat-1"></i></span>
<span class="nav-text">Active</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#kt_tab_pane_2">
<span class="nav-icon"><i class="flaticon2-pie-chart-4"></i></span>
<span class="nav-text">Link</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-drop"></i></span>
<span class="nav-text">Dropdown</span>
</a>
<div class="dropdown-menu">
...
</div>
</li>
<li class="nav-item">
<a class="nav-link disabled" data-toggle="tab" href="#kt_tab_pane_4" tabindex="-1" aria-disabled="true">
<span class="nav-icon"><i class="flaticon2-protected"></i></span>
<span class="nav-text">Disabled</span>
</a>
</li>
</ul>
Use tabs with svg icons.
<ul class="nav nav-tabs nav-tabs-line justify-content-center">
...
</ul>
Use
.nav-tabs-line-2xand
.nav-tabs-line-3xto have bolder tab lines.
<ul class="nav nav-tabs nav-tabs-line nav-tabs-line-2x">
...
</ul>
<ul class="nav nav-tabs nav-tabs-line nav-tabs-line-3x">
...
</ul>
Use
.nav-{color}to have color options for line tabs.
<ul class="nav nav-tabs nav-tabs-line nav-tabs-primary">
...
</ul>
<ul class="nav nav-tabs nav-tabs-line nav-tabs-success">
...
</ul>
<ul class="nav nav-tabs nav-tabs-line nav-tabs-danger">
...
</ul>
<ul class="nav nav-tabs nav-tabs-line nav-tabs-warning">
...
</ul>
<ul class="nav nav-tabs nav-tabs-line nav-tabs-dark">
...
</ul>
<ul class="nav nav-tabs nav-tabs-line nav-tabs-info">
...
</ul>
Use
.nav-tabs-inverseto have inverse line tab option.
<ul class="nav nav-tabs nav-tabs-line nav-tabs-inverse">
...
</ul>
