Segmented Control

A segmented control is a set of two or more segments, each of which functions as a mutually exclusive button. A segmented control is used to display a set of mutually exclusive options.

To create a segmented control, use the nav element with the nav-segmented class. Inside the nav element, add button or a elements with the nav-link class. The nav-link class is used to style the buttons as links.

<nav class="nav nav-segmented" role="tablist">
  <button class="nav-link" role="tab" data-bs-toggle="tab" aria-selected="true" aria-current="page">
    First
  </button>
  ...
</nav>

See the example below to see how the segmented control looks.

Full width

To make the segmented control full width, add the w-100 class to the nav element. It will take up the full width of its parent container.

<nav class="nav nav-segmented w-100" role="tablist">...</nav>

The results can be seen in the example below.

With emojis

You can also use emojis in the segmented control. To do this, add the emoji inside the button element.

With icons

You can also use icons in the segmented control. To do this, add the icon inside the button element.

Vertical direction

To create a vertical segmented control, add the nav-segmented-vertical class to the nav element.

<nav class="nav nav-segmented-vertical" role="tablist">...</nav>

The results can be seen in the example below.

Sizes

You can also change the size of the segmented control. To do this, add the nav-sm or nv-lg class to the nav element. The nav-sm class will make the segmented control smaller, while the nav-lg class will make it larger.

<nav class="nav nav-segmented nav-sm" role="tablist">...</nav>

The results can be seen in the examples below.