tabler/docs/ui/components/segmented-control.mdx

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

```html
<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.

```html example centered background="white"
<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>
```

## 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.

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

The results can be seen in the example below.

```html example vcentered background="white"
<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>
```

## With emojis

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

```html example centered background="white"
<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>
```

## With icons

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


```html example centered background="white"
<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 nav-link-icon icon-2"
    >
      <path d="M9 6l11 0"></path>
      <path d="M9 12l11 0"></path>
      <path d="M9 18l11 0"></path>
      <path d="M5 6l0 .01"></path>
      <path d="M5 12l0 .01"></path>
      <path d="M5 18l0 .01"></path>
    </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 nav-link-icon icon-2"
    >
      <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>
      <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>
      <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"
      ></path>
    </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 nav-link-icon icon-2"
    >
      <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>
      <path d="M16 3v4"></path>
      <path d="M8 3v4"></path>
      <path d="M4 11h16"></path>
      <path d="M11 15h1"></path>
      <path d="M12 15v3"></path>
    </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 nav-link-icon icon-2"
    >
      <path d="M15 3v4a1 1 0 0 0 1 1h4"></path>
      <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>
      <path d="M16 17v2a2 2 0 0 1 -2 2h-7a2 2 0 0 1 -2 -2v-10a2 2 0 0 1 2 -2h2"></path>
    </svg>
    Files
  </button>
</nav>
```

## Vertical direction

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

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

The results can be seen in the example below.

```html example centered background="white"
<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 nav-link-icon icon-2"
    >
      <path d="M9 6l11 0"></path>
      <path d="M9 12l11 0"></path>
      <path d="M9 18l11 0"></path>
      <path d="M5 6l0 .01"></path>
      <path d="M5 12l0 .01"></path>
      <path d="M5 18l0 .01"></path>
    </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 nav-link-icon icon-2"
    >
      <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>
      <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>
      <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"
      ></path>
    </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 nav-link-icon icon-2"
    >
      <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>
      <path d="M16 3v4"></path>
      <path d="M8 3v4"></path>
      <path d="M4 11h16"></path>
      <path d="M11 15h1"></path>
      <path d="M12 15v3"></path>
    </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 nav-link-icon icon-2"
    >
      <path d="M15 3v4a1 1 0 0 0 1 1h4"></path>
      <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>
      <path d="M16 17v2a2 2 0 0 1 -2 2h-7a2 2 0 0 1 -2 -2v-10a2 2 0 0 1 2 -2h2"></path>
    </svg>
    Files
  </button>
</nav>
```

## 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.

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

The results can be seen in the examples below.

```html example vertical centered background="white" separated
<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>
```