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.
<nav class="nav nav-segmented" role="tablist">
<button class="nav-link active" role="tab" data-bs-toggle="tab"
aria-selected="true" aria-current="page">
First
</button>
<button class="nav-link" role="tab" data-bs-toggle="tab" aria-selected="false"
tabindex="-1">
Second
</button>
<button class="nav-link" disabled role="tab" data-bs-toggle="tab"
aria-selected="false" tabindex="-1">
Disabled
</button>
</nav>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.
<nav class="nav nav-segmented w-100" role="tablist">
<button class="nav-link active" role="tab" data-bs-toggle="tab"
aria-selected="true" aria-current="page">
Daily
</button>
<button class="nav-link" role="tab" data-bs-toggle="tab" aria-selected="false"
tabindex="-1">
Weekly
</button>
<button class="nav-link" role="tab" data-bs-toggle="tab" aria-selected="false"
tabindex="-1">
Monthly
</button>
<button class="nav-link" role="tab" data-bs-toggle="tab" aria-selected="false"
tabindex="-1">
Quarterly
</button>
<button class="nav-link" role="tab" data-bs-toggle="tab" aria-selected="false"
tabindex="-1">
Yearly
</button>
</nav>You can also use emojis in the segmented control. To do this, add the emoji inside the button element.
<nav class="nav nav-segmented nav-1" role="tablist">
<button class="nav-link active" role="tab" data-bs-toggle="tab"
aria-selected="true" aria-current="page">
👦
</button>
<button class="nav-link" role="tab" data-bs-toggle="tab" aria-selected="false"
tabindex="-1">
👦🏿
</button>
<button class="nav-link" role="tab" data-bs-toggle="tab" aria-selected="false"
tabindex="-1">
👦🏾
</button>
<button class="nav-link" role="tab" data-bs-toggle="tab" aria-selected="false"
tabindex="-1">
👦🏽
</button>
<button class="nav-link" role="tab" data-bs-toggle="tab" aria-selected="false"
tabindex="-1">
👦🏼
</button>
<button class="nav-link" role="tab" data-bs-toggle="tab" aria-selected="false"
tabindex="-1">
👦🏻
</button>
</nav>You can also use icons in the segmented control. To do this, add the icon inside the button element.
<nav class="nav nav-segmented" role="tablist">
<button class="nav-link active" role="tab" data-bs-toggle="tab"
aria-selected="true" aria-current="page">
<!-- Download SVG icon from http://tabler.io/icons/icon/list -->
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
stroke-linecap="round" stroke-linejoin="round" class="icon icon-1">
<path d="M9 6l11 0" />
<path d="M9 12l11 0" />
<path d="M9 18l11 0" />
<path d="M5 6l0 .01" />
<path d="M5 12l0 .01" />
<path d="M5 18l0 .01" />
</svg>
List
</button>
<button class="nav-link" role="tab" data-bs-toggle="tab" aria-selected="false"
tabindex="-1">
<!-- Download SVG icon from http://tabler.io/icons/icon/layout -->
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
stroke-linecap="round" stroke-linejoin="round" class="icon icon-1">
<path
d="M4 4m0 2a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-2a2 2 0 0 1 -2 -2z" />
<path
d="M4 13m0 2a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v3a2 2 0 0 1 -2 2h-2a2 2 0 0 1 -2 -2z" />
<path
d="M14 4m0 2a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v12a2 2 0 0 1 -2 2h-2a2 2 0 0 1 -2 -2z" />
</svg>
Kanban
</button>
<button class="nav-link" role="tab" data-bs-toggle="tab" aria-selected="false"
tabindex="-1">
<!-- Download SVG icon from http://tabler.io/icons/icon/calendar -->
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
stroke-linecap="round" stroke-linejoin="round" class="icon icon-1">
<path
d="M4 7a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v12a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2v-12z" />
<path d="M16 3v4" />
<path d="M8 3v4" />
<path d="M4 11h16" />
<path d="M11 15h1" />
<path d="M12 15v3" />
</svg>
Calendar
</button>
<button class="nav-link" role="tab" data-bs-toggle="tab" aria-selected="false"
tabindex="-1">
<!-- Download SVG icon from http://tabler.io/icons/icon/files -->
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
stroke-linecap="round" stroke-linejoin="round" class="icon icon-1">
<path d="M15 3v4a1 1 0 0 0 1 1h4" />
<path
d="M18 17h-7a2 2 0 0 1 -2 -2v-10a2 2 0 0 1 2 -2h4l5 5v7a2 2 0 0 1 -2 2z" />
<path
d="M16 17v2a2 2 0 0 1 -2 2h-7a2 2 0 0 1 -2 -2v-10a2 2 0 0 1 2 -2h2" />
</svg>
Files
</button>
</nav>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.
<nav class="nav nav-segmented nav-segmented-vertical" role="tablist">
<button class="nav-link active" role="tab" data-bs-toggle="tab"
aria-selected="true" aria-current="page">
<!-- Download SVG icon from http://tabler.io/icons/icon/list -->
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
stroke-linecap="round" stroke-linejoin="round" class="icon icon-1">
<path d="M9 6l11 0" />
<path d="M9 12l11 0" />
<path d="M9 18l11 0" />
<path d="M5 6l0 .01" />
<path d="M5 12l0 .01" />
<path d="M5 18l0 .01" />
</svg>
List
</button>
<button class="nav-link" role="tab" data-bs-toggle="tab" aria-selected="false"
tabindex="-1">
<!-- Download SVG icon from http://tabler.io/icons/icon/layout -->
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
stroke-linecap="round" stroke-linejoin="round" class="icon icon-1">
<path
d="M4 4m0 2a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-2a2 2 0 0 1 -2 -2z" />
<path
d="M4 13m0 2a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v3a2 2 0 0 1 -2 2h-2a2 2 0 0 1 -2 -2z" />
<path
d="M14 4m0 2a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v12a2 2 0 0 1 -2 2h-2a2 2 0 0 1 -2 -2z" />
</svg>
Kanban
</button>
<button class="nav-link" role="tab" data-bs-toggle="tab" aria-selected="false"
tabindex="-1">
<!-- Download SVG icon from http://tabler.io/icons/icon/calendar -->
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
stroke-linecap="round" stroke-linejoin="round" class="icon icon-1">
<path
d="M4 7a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v12a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2v-12z" />
<path d="M16 3v4" />
<path d="M8 3v4" />
<path d="M4 11h16" />
<path d="M11 15h1" />
<path d="M12 15v3" />
</svg>
Calendar
</button>
<button class="nav-link" role="tab" data-bs-toggle="tab" aria-selected="false"
tabindex="-1">
<!-- Download SVG icon from http://tabler.io/icons/icon/files -->
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
stroke-linecap="round" stroke-linejoin="round" class="icon icon-1">
<path d="M15 3v4a1 1 0 0 0 1 1h4" />
<path
d="M18 17h-7a2 2 0 0 1 -2 -2v-10a2 2 0 0 1 2 -2h4l5 5v7a2 2 0 0 1 -2 2z" />
<path
d="M16 17v2a2 2 0 0 1 -2 2h-7a2 2 0 0 1 -2 -2v-10a2 2 0 0 1 2 -2h2" />
</svg>
Files
</button>
</nav>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.
<nav class="nav nav-segmented nav-sm" role="tablist">
<button class="nav-link active" role="tab" data-bs-toggle="tab"
aria-selected="true" aria-current="page">
List
</button>
<button class="nav-link" role="tab" data-bs-toggle="tab" aria-selected="false"
tabindex="-1">
Kanban
</button>
<button class="nav-link disabled" role="tab" data-bs-toggle="tab"
aria-selected="false" aria-disabled="true" tabindex="-1">
Calendar
</button>
<button class="nav-link" role="tab" data-bs-toggle="tab" aria-selected="false"
tabindex="-1">
Files
</button>
</nav>
<nav class="nav nav-segmented nav-lg" role="tablist">
<button class="nav-link active" role="tab" data-bs-toggle="tab"
aria-selected="true" aria-current="page">
List
</button>
<button class="nav-link" role="tab" data-bs-toggle="tab" aria-selected="false"
tabindex="-1">
Kanban
</button>
<button class="nav-link disabled" role="tab" data-bs-toggle="tab"
aria-selected="false" aria-disabled="true" tabindex="-1">
Calendar
</button>
<button class="nav-link" role="tab" data-bs-toggle="tab" aria-selected="false"
tabindex="-1">
Files
</button>
</nav>