Segmented control

A segmented control is a row of two or more mutually exclusive options styled as one bar, an alternative to radios or tabs.

A segmented control is a nav element with the nav-segmented class, holding button or a elements with the nav-link class.

<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

Add w-100 to the nav to stretch the control to the width of its container.

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

<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

A segment can hold an emoji.

<nav class="nav nav-segmented" 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

A segment can hold an icon.

<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" aria-hidden="true" focusable="false" class="icon">
      <path d="M9 6l11 0" />
      <path d="M9 12l11 0" />
      <path d="M9 18l11 0" />
      <path d="M5 6l0 .01" />
      <path d="M5 12l0 .01" />
      <path d="M5 18l0 .01" />
    </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" aria-hidden="true" focusable="false" class="icon">
      <path d="M4 6a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-2a2 2 0 0 1 -2 -2l0 -1" />
      <path d="M4 15a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v3a2 2 0 0 1 -2 2h-2a2 2 0 0 1 -2 -2l0 -3" />
      <path d="M14 6a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v12a2 2 0 0 1 -2 2h-2a2 2 0 0 1 -2 -2l0 -12" />
    </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" aria-hidden="true" focusable="false" class="icon">
      <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-12" />
      <path d="M16 3v4" />
      <path d="M8 3v4" />
      <path d="M4 11h16" />
      <path d="M11 15h1" />
      <path d="M12 15v3" />
    </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" aria-hidden="true" focusable="false" class="icon">
      <path d="M15 3v4a1 1 0 0 0 1 1h4" />
      <path d="M18 17h-7a2 2 0 0 1 -2 -2v-10a2 2 0 0 1 2 -2h4l5 5v7a2 2 0 0 1 -2 2" />
      <path d="M16 17v2a2 2 0 0 1 -2 2h-7a2 2 0 0 1 -2 -2v-10a2 2 0 0 1 2 -2h2" />
    </svg> Files
  </button>
</nav>

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>

<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" aria-hidden="true" focusable="false" class="icon">
      <path d="M9 6l11 0" />
      <path d="M9 12l11 0" />
      <path d="M9 18l11 0" />
      <path d="M5 6l0 .01" />
      <path d="M5 12l0 .01" />
      <path d="M5 18l0 .01" />
    </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" aria-hidden="true" focusable="false" class="icon">
      <path d="M4 6a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-2a2 2 0 0 1 -2 -2l0 -1" />
      <path d="M4 15a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v3a2 2 0 0 1 -2 2h-2a2 2 0 0 1 -2 -2l0 -3" />
      <path d="M14 6a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v12a2 2 0 0 1 -2 2h-2a2 2 0 0 1 -2 -2l0 -12" />
    </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" aria-hidden="true" focusable="false" class="icon">
      <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-12" />
      <path d="M16 3v4" />
      <path d="M8 3v4" />
      <path d="M4 11h16" />
      <path d="M11 15h1" />
      <path d="M12 15v3" />
    </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" aria-hidden="true" focusable="false" class="icon">
      <path d="M15 3v4a1 1 0 0 0 1 1h4" />
      <path d="M18 17h-7a2 2 0 0 1 -2 -2v-10a2 2 0 0 1 2 -2h4l5 5v7a2 2 0 0 1 -2 2" />
      <path d="M16 17v2a2 2 0 0 1 -2 2h-7a2 2 0 0 1 -2 -2v-10a2 2 0 0 1 2 -2h2" />
    </svg> Files
  </button>
</nav>

Sizes

Add nav-sm or nav-lg to the nav to change the size.

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

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

Accessibility

A segmented control that switches panels is a tab list: put role="tablist" on the nav, role="tab" on each button, and link them to the panels with aria-controls.
A segmented control that picks a value is a radio group instead. Use input type="radio" with a shared name inside a fieldset with a legend, so the arrow keys work and the group has a name.
Do not mix the two. Buttons with aria-pressed in a row read as separate toggles, which is not what a segmented control looks like.
Every segment needs a text label. An emoji or an icon alone leaves the option unnamed - add an aria-label if the design has no room for words.

SCSS variables

Use these SCSS variables to customize the segmented control. The default values are:

$nav-segmented-height: 2.5rem;
$nav-segmented-padding: 2px;
$nav-segmented-radius: 6px;
$nav-segmented-gap: 0.25rem;
$nav-segmented-link-gap: 0.25rem;
$nav-segmented-link-padding-x: 0.75rem;
$nav-segmented-link-icon-size: 1.25rem;
$nav-segmented-icon-margin: -0.25rem;
$nav-segmented-height-sm: 2rem;
$nav-segmented-radius-sm: 4px;
$nav-segmented-link-padding-x-sm: 0.5rem;
$nav-segmented-link-gap-sm: 0.25rem;
$nav-segmented-link-icon-size-sm: 1rem;
$nav-segmented-height-lg: 3rem;
$nav-segmented-radius-lg: 8px;
$nav-segmented-link-padding-x-lg: 1rem;
$nav-segmented-link-gap-lg: 0.5rem;
$nav-segmented-link-icon-size-lg: 1.5rem;

Class reference

Every class this component ships, grouped by what it changes. A name in braces stands for a family — {color} is any base color, {breakpoint} any responsive step.

`nav-segmented`	component	Applied together with nav, turns it into a segmented control
`nav-segmented-vertical`	direction	Stacks the segments in a column
`nav-sm`	size	Small size
`nav-lg`	size	Large size

Menu