--- 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 ``` See the example below to see how the segmented control looks. ```html example centered background="white" ``` ## 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. ```html example vcentered background="white" ``` ## 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" ``` ## 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" ``` ## 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. ```html example centered background="white" ``` ## 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. ```html example vertical centered background="white" separated ```