---
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 -%}
{%- 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.
```html
```
The results can be seen in the example below.
{% capture html -%}
{%- 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 -%}
{%- 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 -%}
{%- 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.
```html
```
The results can be seen in the example below.
{% capture html -%}
{%- 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.
```html
```
The results can be seen in the examples below.
{% capture html -%}
{%- endcapture %}
{% include "docs/example.html" html=html centered vertical %}