tabler/docs/pages/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.
layout: '@shared/layouts/DocsMdxLayout.astro'
---
import Example from '@shared/components/docs/Example.astro';
import Icon from '@shared/components/Icon.astro';

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.

<Example centered>
<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>
</Example>

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

<Example>
<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>
</Example>

## With emojis

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

<Example centered>
<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>
</Example>

## With icons

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


<Example centered>
<nav class="nav nav-segmented" role="tablist"> <button class="nav-link active" role="tab" data-bs-toggle="tab" aria-selected="true" aria-current="page" > <Icon name="list" /> List </button> <button class="nav-link" role="tab" data-bs-toggle="tab" aria-selected="false" tabindex="-1"> <Icon name="layout" /> Kanban </button> <button class="nav-link" role="tab" data-bs-toggle="tab" aria-selected="false" tabindex="-1"> <Icon name="calendar" /> Calendar </button> <button class="nav-link" role="tab" data-bs-toggle="tab" aria-selected="false" tabindex="-1"> <Icon name="files" /> Files </button> </nav>
</Example>

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

<Example centered>
<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" > <Icon name="list" /> List </button> <button class="nav-link" role="tab" data-bs-toggle="tab" aria-selected="false" tabindex="-1"> <Icon name="layout" /> Kanban </button> <button class="nav-link" role="tab" data-bs-toggle="tab" aria-selected="false" tabindex="-1"> <Icon name="calendar" /> Calendar </button> <button class="nav-link" role="tab" data-bs-toggle="tab" aria-selected="false" tabindex="-1"> <Icon name="files" /> Files </button> </nav>
</Example>

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

<Example centered vertical>
<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>
</Example>