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="#">Orthopedics</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-ui-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="#">Orthopedics</a></li>
  <li class="nav-item dropdown"><a class="nav-link dropdown-toggle" data-ui-toggle="dropdown" href="#" role="button" aria-expanded="false">More</a><ul class="dropdown-menu"><li><a class="dropdown-item" href="#">Cardiology</a></li><li><a class="dropdown-item" href="#">Dermatology</a></li></ul></li>
</ul>

13Working tabs

Tabs with <code>data-ui-toggle="tab"</code> switch between content panes without leaving the page.

Our clinic is fully accessible, with free parking right outside.

Family plans
Insurance friendly
Same-day appointments

Book online in two minutes and see a doctor as soon as today.

<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-ui-toggle="tab" data-ui-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-ui-toggle="tab" data-ui-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-ui-toggle="tab" data-ui-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">Our clinic is fully accessible, with free parking right outside.</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>Insurance friendly</li>
          <li>Same-day appointments</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">Book online in two minutes and see a doctor as soon as today.</p>
      </div>
    </div>
  </div>
</div>

14Working pills

Pills with <code>data-ui-toggle="pill"</code> control panes below them.

$18.09 per month

$151.46 per year

$569.89 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-ui-toggle="pill" data-ui-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-ui-toggle="pill" data-ui-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-ui-toggle="pill" data-ui-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">$18.09 <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">$151.46 <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">$569.89 <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 listen first, then build a plan around what you actually need.

Security

Our clinic is fully accessible, with free parking right outside.

Notifications

Book online in two minutes and see a doctor as soon as today.

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-ui-toggle="pill" data-ui-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-ui-toggle="pill" data-ui-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-ui-toggle="pill" data-ui-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-ui-toggle="pill" data-ui-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 listen first, then build a plan around what you actually need.</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">Book online in two minutes and see a doctor as soon as today.</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.

Same-day appointments are available for urgent needs on weekdays.

Children are welcome, and our paediatric team knows how to make them smile.

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-ui-toggle="tab" data-ui-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">13</span></button></li>
  <li class="nav-item" role="presentation"><button class="nav-link" id="pane-1063-tab" data-ui-toggle="tab" data-ui-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-ui-toggle="tab" data-ui-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">Same-day appointments are available for urgent needs on weekdays.</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">Children are welcome, and our paediatric team knows how to make them smile.</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.

Telehealth

Our specialists take time to listen and explain every step of your treatment.

Telehealth

Our specialists take time to listen and explain every step of your treatment.

Telehealth

Our specialists take time to listen and explain every step of your treatment.

<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-ui-toggle="tab" data-ui-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-ui-toggle="tab" data-ui-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-ui-toggle="tab" data-ui-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">Telehealth</h3>
      <p class="card-text">Our specialists take time to listen and explain every step of your treatment.</p>
    </div>
    <div class="tab-pane fade" id="pane-1066" role="tabpanel" aria-labelledby="pane-1066-tab" tabindex="0">
      <h3 class="h5 card-title">Telehealth</h3>
      <p class="card-text">Our specialists take time to listen and explain every step of your treatment.</p>
    </div>
    <div class="tab-pane fade" id="pane-1067" role="tabpanel" aria-labelledby="pane-1067-tab" tabindex="0">
      <h3 class="h5 card-title">Telehealth</h3>
      <p class="card-text">Our specialists take time to listen and explain every step of your treatment.</p>
    </div>
  </div>
</div>

18List group tabs

List group items with <code>data-ui-toggle="list"</code> act as a vertical tab menu.

Telehealth Lab tests Health check-ups

Every detail is handled by people who care about getting it right.

Friendly people answer your questions quickly, by phone, chat or email.

Lab results arrive in your patient portal, usually within 48 hours.

<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-ui-toggle="list" href="#lg-1068" role="tab" aria-controls="lg-1068">Telehealth</a><a class="list-group-item list-group-item-action" id="lg-1069-list" data-ui-toggle="list" href="#lg-1069" role="tab" aria-controls="lg-1069">Lab tests</a><a class="list-group-item list-group-item-action" id="lg-1070-list" data-ui-toggle="list" href="#lg-1070" role="tab" aria-controls="lg-1070">Health check-ups</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">Every detail is handled by people who care about getting it right.</p>
      </div>
      <div class="tab-pane fade" id="lg-1069" role="tabpanel" aria-labelledby="lg-1069-list" tabindex="0">
        <p class="mb-0">Friendly people answer your questions quickly, by phone, chat or email.</p>
      </div>
      <div class="tab-pane fade" id="lg-1070" role="tabpanel" aria-labelledby="lg-1070-list" tabindex="0">
        <p class="mb-0">Lab results arrive in your patient portal, usually within 48 hours.</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.

Friendly reminders make sure you never miss a check-up or a dose.

<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-ui-toggle="pill" data-ui-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-ui-toggle="pill" data-ui-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-ui-toggle="pill" data-ui-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">Friendly reminders make sure you never miss a check-up or a dose.</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">Friendly reminders make sure you never miss a check-up or a dose.</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">Friendly reminders make sure you never miss a check-up or a dose.</p>
  </div>
</div>