Bootstrap Navs component with a variety of options to provide unique looking Line Tab components that matches Metronic's design standards.
Use .nav and .nav-tabs with nav-tabs-line class 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-bolder and .nav-boldest classes 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-header with .card-header-tabs-line to 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-2x and .nav-tabs-line-3x to 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-inverse to have inverse line tab option.
<ul class="nav nav-tabs nav-tabs-line nav-tabs-inverse">
...
</ul>
