tabler.tabler/docs/content/ui/components/segmented-control.md

---

title: Segmented Control

summary: 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.

{% capture html -%} <button

class="nav-link active"
role="tab"
data-bs-toggle="tab"
aria-selected="true"
aria-current="page"

First

Second

<button

class="nav-link"
disabled
role="tab"
data-bs-toggle="tab"
aria-selected="false"
tabindex="-1"

Disabled

{%- endcapture %} {% include "docs/example.html" html=html centered %}

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.

{% capture html -%} <button

class="nav-link active"
role="tab"
data-bs-toggle="tab"
aria-selected="true"
aria-current="page"

Daily

Weekly

Monthly

Quarterly

Yearly

{%- endcapture %} {% include "docs/example.html" html=html %}

With emojis

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

{% capture html -%} <button

class="nav-link active"
role="tab"
data-bs-toggle="tab"
aria-selected="true"
aria-current="page"

👦

👦🏿

👦🏾

👦🏽

👦🏼

👦🏻

{%- endcapture %} {% include "docs/example.html" html=html centered %}

With icons

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

{% capture html -%} <button

class="nav-link active"
role="tab"
data-bs-toggle="tab"
aria-selected="true"
aria-current="page"

{% include "ui/icon.html" icon="list" %}
List

{% include "ui/icon.html" icon="layout" %}
Kanban

{% include "ui/icon.html" icon="calendar" %}
Calendar

{% include "ui/icon.html" icon="files" %}
Files

{%- endcapture %} {% include "docs/example.html" html=html centered %}

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.

{% capture html -%} <button

class="nav-link active"
role="tab"
data-bs-toggle="tab"
aria-selected="true"
aria-current="page"

{% include "ui/icon.html" icon="list" %}
List

{% include "ui/icon.html" icon="layout" %}
Kanban

{% include "ui/icon.html" icon="calendar" %}
Calendar

{% include "ui/icon.html" icon="files" %}
Files

{%- endcapture %} {% include "docs/example.html" html=html centered %}

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.

{% capture html -%} <button

class="nav-link active"
role="tab"
data-bs-toggle="tab"
aria-selected="true"
aria-current="page"

List

Kanban

<button

class="nav-link disabled"
role="tab"
data-bs-toggle="tab"
aria-selected="false"
aria-disabled="true"
tabindex="-1"

Calendar

Files

<button

class="nav-link active"
role="tab"
data-bs-toggle="tab"
aria-selected="true"
aria-current="page"

List

Kanban

<button

class="nav-link disabled"
role="tab"
data-bs-toggle="tab"
aria-selected="false"
aria-disabled="true"
tabindex="-1"

Calendar

Files

{%- endcapture %} {% include "docs/example.html" html=html centered vertical %}