Navs & Tabs
Navs are the building block for in-page menus: simple link rows, tabs, pills and underlined links that can be aligned, stretched or stacked. With the tab data API they also switch content panes, so the same markup works for settings screens, product details and dashboards.
1Base nav
A plain <code>ul.nav</code> list of links: active, normal and disabled states.
<ul class="nav ">
<li class="nav-item"><a class="nav-link active" aria-current="page" href="#">Active</a></li>
<li class="nav-item"><a class="nav-link" href="#">Overview</a></li>
<li class="nav-item"><a class="nav-link" href="#">Updates</a></li>
<li class="nav-item"><a class="nav-link disabled" aria-disabled="true" href="#">Disabled</a></li>
</ul>2Nav element
The same component written as a <code>nav</code> element with links only - no list markup needed.
<nav class="nav ">
<a class="nav-link active" aria-current="page" href="#">Home</a><a class="nav-link" href="#">Cardiology</a><a class="nav-link" href="#">Dermatology</a><a class="nav-link disabled" aria-disabled="true" href="#">Archive</a>
</nav>3Centered
<code>.justify-content-center</code> centers the links.
<ul class="nav justify-content-center">
<li class="nav-item"><a class="nav-link active" aria-current="page" href="#">Latest</a></li>
<li class="nav-item"><a class="nav-link" href="#">Trending</a></li>
<li class="nav-item"><a class="nav-link" href="#">Following</a></li>
</ul>4Right aligned
<code>.justify-content-end</code> moves the links to the right.
<ul class="nav justify-content-end">
<li class="nav-item"><a class="nav-link active" aria-current="page" href="#">Account</a></li>
<li class="nav-item"><a class="nav-link" href="#">Billing</a></li>
<li class="nav-item"><a class="nav-link" href="#">Security</a></li>
</ul>5Vertical
<code>.flex-column</code> stacks the links - for sidebars and settings menus.
<div style="max-width:240px">
<nav class="nav flex-column">
<a class="nav-link active" aria-current="page" href="#">Profile</a><a class="nav-link" href="#">Notifications</a><a class="nav-link" href="#">Connected apps</a><a class="nav-link disabled" aria-disabled="true" href="#">Danger zone</a>
</nav>
</div>6Tabs
<code>.nav-tabs</code> draws classic folder tabs.
<ul class="nav nav-tabs">
<li class="nav-item"><a class="nav-link active" aria-current="page" href="#">Summary</a></li>
<li class="nav-item"><a class="nav-link" href="#">Activity</a></li>
<li class="nav-item"><a class="nav-link" href="#">Members</a></li>
<li class="nav-item"><a class="nav-link disabled" aria-disabled="true" href="#">Locked</a></li>
</ul>7Pills
<code>.nav-pills</code> uses filled rounded buttons for the active link.
<ul class="nav nav-pills">
<li class="nav-item"><a class="nav-link active" aria-current="page" href="#">All</a></li>
<li class="nav-item"><a class="nav-link" href="#">Open</a></li>
<li class="nav-item"><a class="nav-link" href="#">Closed</a></li>
<li class="nav-item"><a class="nav-link disabled" aria-disabled="true" href="#">Spam</a></li>
</ul>8Underline
<code>.nav-underline</code> marks the active link with a thick bottom border.
<ul class="nav nav-underline">
<li class="nav-item"><a class="nav-link active" aria-current="page" href="#">For you</a></li>
<li class="nav-item"><a class="nav-link" href="#">Popular</a></li>
<li class="nav-item"><a class="nav-link" href="#">Newest</a></li>
<li class="nav-item"><a class="nav-link disabled" aria-disabled="true" href="#">Hidden</a></li>
</ul>9Fill
<code>.nav-fill</code> stretches the items to use all available width, each as wide as its text.
<ul class="nav nav-pills nav-fill">
<li class="nav-item"><a class="nav-link active" aria-current="page" href="#">Day</a></li>
<li class="nav-item"><a class="nav-link" href="#">Week</a></li>
<li class="nav-item"><a class="nav-link" href="#">Month and quarter</a></li>
<li class="nav-item"><a class="nav-link disabled" aria-disabled="true" href="#">Year</a></li>
</ul>10Justified
<code>.nav-justified</code> makes every item exactly the same width.
<ul class="nav nav-tabs nav-justified">
<li class="nav-item"><a class="nav-link active" aria-current="page" href="#">Inbox</a></li>
<li class="nav-item"><a class="nav-link" href="#">Sent</a></li>
<li class="nav-item"><a class="nav-link" href="#">Drafts</a></li>
</ul>11Tabs with dropdown
A dropdown inside a tab bar for less used sections.
<ul class="nav nav-tabs">
<li class="nav-item"><a class="nav-link active" aria-current="page" href="#">Board</a></li>
<li class="nav-item"><a class="nav-link" href="#">Timeline</a></li>
<li class="nav-item dropdown"><a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-expanded="false">Views</a><ul class="dropdown-menu"><li><a class="dropdown-item" href="#">Calendar</a></li><li><a class="dropdown-item" href="#">Table</a></li><li><hr class="dropdown-divider"></li><li><a class="dropdown-item" href="#">Manage views</a></li></ul></li>
</ul>12Pills with dropdown
Pills plus a dropdown that lists more categories.
<ul class="nav nav-pills">
<li class="nav-item"><a class="nav-link active" aria-current="page" href="#">Cardiology</a></li>
<li class="nav-item"><a class="nav-link" href="#">Dermatology</a></li>
<li class="nav-item dropdown"><a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-expanded="false">More</a><ul class="dropdown-menu"><li><a class="dropdown-item" href="#">Orthopedics</a></li><li><a class="dropdown-item" href="#">Pediatrics</a></li></ul></li>
</ul>13Working tabs
Tabs with <code>data-bs-toggle="tab"</code> switch between content panes without leaving the page.
Same-day appointments are available for urgent needs on weekdays.
- Family plans
- Same-day appointments
- Family plans
Every detail is handled by people who care about getting it right.
<div class="border rounded">
<ul class="nav nav-tabs px-2 pt-2" role="tablist">
<li class="nav-item" role="presentation"><button class="nav-link active" id="pane-1052-tab" data-bs-toggle="tab" data-bs-target="#pane-1052" type="button" role="tab" aria-controls="pane-1052" aria-selected="true">Description</button></li>
<li class="nav-item" role="presentation"><button class="nav-link" id="pane-1053-tab" data-bs-toggle="tab" data-bs-target="#pane-1053" type="button" role="tab" aria-controls="pane-1053" aria-selected="false">Specifications</button></li>
<li class="nav-item" role="presentation"><button class="nav-link" id="pane-1054-tab" data-bs-toggle="tab" data-bs-target="#pane-1054" type="button" role="tab" aria-controls="pane-1054" aria-selected="false">Reviews</button></li>
</ul>
<div class="tab-content">
<div class="tab-pane fade show active" id="pane-1052" role="tabpanel" aria-labelledby="pane-1052-tab" tabindex="0">
<div class="p-3">
<p class="mb-0">Same-day appointments are available for urgent needs on weekdays.</p>
</div>
</div>
<div class="tab-pane fade" id="pane-1053" role="tabpanel" aria-labelledby="pane-1053-tab" tabindex="0">
<div class="p-3">
<ul class="mb-0">
<li>Family plans</li>
<li>Same-day appointments</li>
<li>Family plans</li>
</ul>
</div>
</div>
<div class="tab-pane fade" id="pane-1054" role="tabpanel" aria-labelledby="pane-1054-tab" tabindex="0">
<div class="p-3">
<p class="mb-1 text-warning"><i class="bi bi-star-fill" aria-hidden="true"></i><i class="bi bi-star-fill" aria-hidden="true"></i><i class="bi bi-star-fill" aria-hidden="true"></i><i class="bi bi-star-fill" aria-hidden="true"></i><i class="bi bi-star" aria-hidden="true"></i></p>
<p class="mb-0 small">Every detail is handled by people who care about getting it right.</p>
</div>
</div>
</div>
</div>14Working pills
Pills with <code>data-bs-toggle="pill"</code> control panes below them.
$14.84 per month
$243.94 per year
$779.24 one time
<ul class="nav nav-pills mb-3" role="tablist">
<li class="nav-item" role="presentation"><button class="nav-link active" id="pane-1055-tab" data-bs-toggle="pill" data-bs-target="#pane-1055" type="button" role="tab" aria-controls="pane-1055" aria-selected="true">Monthly</button></li>
<li class="nav-item" role="presentation"><button class="nav-link" id="pane-1056-tab" data-bs-toggle="pill" data-bs-target="#pane-1056" type="button" role="tab" aria-controls="pane-1056" aria-selected="false">Yearly</button></li>
<li class="nav-item" role="presentation"><button class="nav-link" id="pane-1057-tab" data-bs-toggle="pill" data-bs-target="#pane-1057" type="button" role="tab" aria-controls="pane-1057" aria-selected="false">Lifetime</button></li>
</ul>
<div class="tab-content">
<div class="tab-pane fade show active" id="pane-1055" role="tabpanel" aria-labelledby="pane-1055-tab" tabindex="0">
<p class="fs-4 fw-bold mb-0">$14.84 <small class="fs-6 text-body-secondary">per month</small></p>
</div>
<div class="tab-pane fade" id="pane-1056" role="tabpanel" aria-labelledby="pane-1056-tab" tabindex="0">
<p class="fs-4 fw-bold mb-0">$243.94 <small class="fs-6 text-body-secondary">per year</small></p>
</div>
<div class="tab-pane fade" id="pane-1057" role="tabpanel" aria-labelledby="pane-1057-tab" tabindex="0">
<p class="fs-4 fw-bold mb-0">$779.24 <small class="fs-6 text-body-secondary">one time</small></p>
</div>
</div>15Vertical pills
Stacked pills on the left control panes on the right; on phones they wrap above.
Account
We work with most insurance providers and explain any costs upfront.
Security
Our clinic is fully accessible, with free parking right outside.
Notifications
Friendly people answer your questions quickly, by phone, chat or email.
Billing
We listen first, then build a plan around what you actually need.
<div class="d-flex flex-column flex-sm-row align-items-start gap-3">
<div class="nav flex-column nav-pills" role="tablist" aria-orientation="vertical" style="min-width:160px">
<button class="nav-link text-start active" id="vp-1058-tab" data-bs-toggle="pill" data-bs-target="#vp-1058" type="button" role="tab" aria-controls="vp-1058" aria-selected="true">Account</button>
<button class="nav-link text-start" id="vp-1059-tab" data-bs-toggle="pill" data-bs-target="#vp-1059" type="button" role="tab" aria-controls="vp-1059" aria-selected="false">Security</button>
<button class="nav-link text-start" id="vp-1060-tab" data-bs-toggle="pill" data-bs-target="#vp-1060" type="button" role="tab" aria-controls="vp-1060" aria-selected="false">Notifications</button>
<button class="nav-link text-start" id="vp-1061-tab" data-bs-toggle="pill" data-bs-target="#vp-1061" type="button" role="tab" aria-controls="vp-1061" aria-selected="false">Billing</button>
</div>
<div class="tab-content flex-grow-1">
<div class="tab-pane fade show active" id="vp-1058" role="tabpanel" aria-labelledby="vp-1058-tab" tabindex="0">
<h3 class="h6">Account</h3>
<p class="mb-0">We work with most insurance providers and explain any costs upfront.</p>
</div>
<div class="tab-pane fade" id="vp-1059" role="tabpanel" aria-labelledby="vp-1059-tab" tabindex="0">
<h3 class="h6">Security</h3>
<p class="mb-0">Our clinic is fully accessible, with free parking right outside.</p>
</div>
<div class="tab-pane fade" id="vp-1060" role="tabpanel" aria-labelledby="vp-1060-tab" tabindex="0">
<h3 class="h6">Notifications</h3>
<p class="mb-0">Friendly people answer your questions quickly, by phone, chat or email.</p>
</div>
<div class="tab-pane fade" id="vp-1061" role="tabpanel" aria-labelledby="vp-1061-tab" tabindex="0">
<h3 class="h6">Billing</h3>
<p class="mb-0">We listen first, then build a plan around what you actually need.</p>
</div>
</div>
</div>16Tabs with icons and badges
Icons and counters inside the tab labels.
Lab results arrive in your patient portal, usually within 48 hours.
Book online in two minutes and see a doctor as soon as today.
Clear prices, honest advice and no surprises along the way.
<ul class="nav nav-tabs mb-3" role="tablist">
<li class="nav-item" role="presentation"><button class="nav-link active" id="pane-1062-tab" data-bs-toggle="tab" data-bs-target="#pane-1062" type="button" role="tab" aria-controls="pane-1062" aria-selected="true"><i class="bi bi-inbox" aria-hidden="true"></i> Inbox <span class="badge text-bg-primary rounded-pill">6</span></button></li>
<li class="nav-item" role="presentation"><button class="nav-link" id="pane-1063-tab" data-bs-toggle="tab" data-bs-target="#pane-1063" type="button" role="tab" aria-controls="pane-1063" aria-selected="false"><i class="bi bi-star" aria-hidden="true"></i> Starred</button></li>
<li class="nav-item" role="presentation"><button class="nav-link" id="pane-1064-tab" data-bs-toggle="tab" data-bs-target="#pane-1064" type="button" role="tab" aria-controls="pane-1064" aria-selected="false"><i class="bi bi-send" aria-hidden="true"></i> Sent</button></li>
</ul>
<div class="tab-content">
<div class="tab-pane fade show active" id="pane-1062" role="tabpanel" aria-labelledby="pane-1062-tab" tabindex="0">
<div class="p-3">
<p class="mb-0">Lab results arrive in your patient portal, usually within 48 hours.</p>
</div>
</div>
<div class="tab-pane fade" id="pane-1063" role="tabpanel" aria-labelledby="pane-1063-tab" tabindex="0">
<div class="p-3">
<p class="mb-0">Book online in two minutes and see a doctor as soon as today.</p>
</div>
</div>
<div class="tab-pane fade" id="pane-1064" role="tabpanel" aria-labelledby="pane-1064-tab" tabindex="0">
<div class="p-3">
<p class="mb-0">Clear prices, honest advice and no surprises along the way.</p>
</div>
</div>
</div>17Card header tabs
<code>.card-header-tabs</code> blends the tab bar into a card header.
General practice
Video consultations let you speak with a doctor from the comfort of home.
General practice
Video consultations let you speak with a doctor from the comfort of home.
General practice
Video consultations let you speak with a doctor from the comfort of home.
<div class="card">
<div class="card-header">
<ul class="nav nav-tabs card-header-tabs" role="tablist">
<li class="nav-item" role="presentation"><button class="nav-link active" id="pane-1065-tab" data-bs-toggle="tab" data-bs-target="#pane-1065" type="button" role="tab" aria-controls="pane-1065" aria-selected="true">Overview</button></li>
<li class="nav-item" role="presentation"><button class="nav-link" id="pane-1066-tab" data-bs-toggle="tab" data-bs-target="#pane-1066" type="button" role="tab" aria-controls="pane-1066" aria-selected="false">Pricing</button></li>
<li class="nav-item" role="presentation"><button class="nav-link" id="pane-1067-tab" data-bs-toggle="tab" data-bs-target="#pane-1067" type="button" role="tab" aria-controls="pane-1067" aria-selected="false">Support</button></li>
</ul>
</div>
<div class="card-body tab-content">
<div class="tab-pane fade show active" id="pane-1065" role="tabpanel" aria-labelledby="pane-1065-tab" tabindex="0">
<h3 class="h5 card-title">General practice</h3>
<p class="card-text">Video consultations let you speak with a doctor from the comfort of home.</p>
</div>
<div class="tab-pane fade" id="pane-1066" role="tabpanel" aria-labelledby="pane-1066-tab" tabindex="0">
<h3 class="h5 card-title">General practice</h3>
<p class="card-text">Video consultations let you speak with a doctor from the comfort of home.</p>
</div>
<div class="tab-pane fade" id="pane-1067" role="tabpanel" aria-labelledby="pane-1067-tab" tabindex="0">
<h3 class="h5 card-title">General practice</h3>
<p class="card-text">Video consultations let you speak with a doctor from the comfort of home.</p>
</div>
</div>
</div>18List group tabs
List group items with <code>data-bs-toggle="list"</code> act as a vertical tab menu.
Friendly reminders make sure you never miss a check-up or a dose.
Every detail is handled by people who care about getting it right.
Our team has done this many times, so you never have to guess.
<div class="row g-3">
<div class="col-sm-4">
<div class="list-group" role="tablist">
<a class="list-group-item list-group-item-action active" id="lg-1068-list" data-bs-toggle="list" href="#lg-1068" role="tab" aria-controls="lg-1068">General practice</a><a class="list-group-item list-group-item-action" id="lg-1069-list" data-bs-toggle="list" href="#lg-1069" role="tab" aria-controls="lg-1069">Physiotherapy</a><a class="list-group-item list-group-item-action" id="lg-1070-list" data-bs-toggle="list" href="#lg-1070" role="tab" aria-controls="lg-1070">Dental care</a>
</div>
</div>
<div class="col-sm-8">
<div class="tab-content">
<div class="tab-pane fade show active" id="lg-1068" role="tabpanel" aria-labelledby="lg-1068-list" tabindex="0">
<p class="mb-0">Friendly reminders make sure you never miss a check-up or a dose.</p>
</div>
<div class="tab-pane fade" id="lg-1069" role="tabpanel" aria-labelledby="lg-1069-list" tabindex="0">
<p class="mb-0">Every detail is handled by people who care about getting it right.</p>
</div>
<div class="tab-pane fade" id="lg-1070" role="tabpanel" aria-labelledby="lg-1070-list" tabindex="0">
<p class="mb-0">Our team has done this many times, so you never have to guess.</p>
</div>
</div>
</div>
</div>19Responsive direction
<code>.flex-column .flex-sm-row</code> stacks the pills on phones and lines them up on larger screens.
<nav class="nav nav-pills flex-column flex-sm-row">
<a class="flex-sm-fill text-sm-center nav-link active" aria-current="page" href="#">Getting started</a><a class="flex-sm-fill text-sm-center nav-link" href="#">Guides</a><a class="flex-sm-fill text-sm-center nav-link" href="#">API</a><a class="flex-sm-fill text-sm-center nav-link disabled" aria-disabled="true">Changelog</a>
</nav>20Segmented control
Small pills inside a tinted rounded track look like an iOS segmented control.
Our specialists take time to listen and explain every step of your treatment.
Our specialists take time to listen and explain every step of your treatment.
Our specialists take time to listen and explain every step of your treatment.
<div class="d-inline-block bg-body-tertiary border rounded-pill p-1">
<ul class="nav nav-pills small cb-seg" role="tablist">
<li class="nav-item" role="presentation"><button class="nav-link active" id="pane-1071-tab" data-bs-toggle="pill" data-bs-target="#pane-1071" type="button" role="tab" aria-controls="pane-1071" aria-selected="true">List</button></li>
<li class="nav-item" role="presentation"><button class="nav-link" id="pane-1072-tab" data-bs-toggle="pill" data-bs-target="#pane-1072" type="button" role="tab" aria-controls="pane-1072" aria-selected="false">Grid</button></li>
<li class="nav-item" role="presentation"><button class="nav-link" id="pane-1073-tab" data-bs-toggle="pill" data-bs-target="#pane-1073" type="button" role="tab" aria-controls="pane-1073" aria-selected="false">Map</button></li>
</ul>
</div>
<div class="tab-content mt-3">
<div class="tab-pane fade show active" id="pane-1071" role="tabpanel" aria-labelledby="pane-1071-tab" tabindex="0">
<p class="mb-0 small text-body-secondary">Our specialists take time to listen and explain every step of your treatment.</p>
</div>
<div class="tab-pane fade" id="pane-1072" role="tabpanel" aria-labelledby="pane-1072-tab" tabindex="0">
<p class="mb-0 small text-body-secondary">Our specialists take time to listen and explain every step of your treatment.</p>
</div>
<div class="tab-pane fade" id="pane-1073" role="tabpanel" aria-labelledby="pane-1073-tab" tabindex="0">
<p class="mb-0 small text-body-secondary">Our specialists take time to listen and explain every step of your treatment.</p>
</div>
</div>