🗃️ Вкладки

Сегменты, подчёркивание, вертикальные

Сегменты

Активная вкладка — светлая «таблетка» на сером фоне контейнера.

Содержимое вкладки «Обзор».

<div class="w-full max-w-lg">
  <div class="inline-flex rounded-lg bg-slate-100 p-1 dark:bg-slate-800">
    <button class="rounded-md bg-white px-3 py-1.5 text-sm font-medium text-slate-900 shadow-sm dark:bg-slate-900 dark:text-slate-50">Обзор</button>
    <button class="rounded-md px-3 py-1.5 text-sm font-medium text-slate-600 hover:text-slate-900 dark:text-slate-400 dark:hover:text-slate-100">Аналитика</button>
    <button class="rounded-md px-3 py-1.5 text-sm font-medium text-slate-600 hover:text-slate-900 dark:text-slate-400 dark:hover:text-slate-100">Отчёты</button>
  </div>
  <div class="mt-3 rounded-lg border border-slate-200 p-4 text-sm text-slate-600 dark:border-slate-700 dark:text-slate-400">
    Содержимое вкладки «Обзор».
  </div>
</div>

Подчёркивание

border-transparent у неактивных резервирует место — текст не «прыгает» при наведении.

Список активных задач.

<div class="w-full max-w-lg">
  <div class="border-b border-slate-200 dark:border-slate-700">
    <nav class="-mb-px flex gap-6 text-sm">
      <button class="border-b-2 border-sky-600 px-1 pb-3 font-medium text-sky-700 dark:text-sky-400">Активные</button>
      <button class="border-b-2 border-transparent px-1 pb-3 text-slate-500 hover:border-slate-300 hover:text-slate-700 dark:text-slate-400 dark:hover:text-slate-200">Завершённые</button>
      <button class="border-b-2 border-transparent px-1 pb-3 text-slate-500 hover:border-slate-300 hover:text-slate-700 dark:text-slate-400 dark:hover:text-slate-200">Архив</button>
    </nav>
  </div>
  <div class="pt-4 text-sm text-slate-600 dark:text-slate-400">Список активных задач.</div>
</div>

Вертикальные вкладки

Для длинных списков разделов вертикальная раскладка читается лучше горизонтальной.

Настройки профиля: имя, фото, контакты.

<div class="flex w-full max-w-lg gap-4">
  <nav class="flex w-40 shrink-0 flex-col gap-1 text-sm">
    <button class="rounded-md bg-slate-100 px-3 py-2 text-left font-medium text-slate-900 dark:bg-slate-800 dark:text-slate-50">Профиль</button>
    <button class="rounded-md px-3 py-2 text-left text-slate-600 hover:bg-slate-100 dark:text-slate-400 dark:hover:bg-slate-800">Безопасность</button>
    <button class="rounded-md px-3 py-2 text-left text-slate-600 hover:bg-slate-100 dark:text-slate-400 dark:hover:bg-slate-800">Уведомления</button>
  </nav>
  <div class="flex-1 rounded-lg border border-slate-200 p-4 text-sm text-slate-600 dark:border-slate-700 dark:text-slate-400">
    Настройки профиля: имя, фото, контакты.
  </div>
</div>

Вкладки со счётчиками

Счётчик — отдельный элемент внутри кнопки, а не часть подписи.

<div class="w-full max-w-lg">
  <div class="inline-flex rounded-lg bg-slate-100 p-1 dark:bg-slate-800">
    <button class="inline-flex items-center gap-2 rounded-md bg-white px-3 py-1.5 text-sm font-medium text-slate-900 shadow-sm dark:bg-slate-900 dark:text-slate-50">
      Входящие <span class="rounded-full bg-slate-200 px-1.5 text-xs tabular-nums dark:bg-slate-700">12</span>
    </button>
    <button class="inline-flex items-center gap-2 rounded-md px-3 py-1.5 text-sm font-medium text-slate-600 dark:text-slate-400">
      Спам <span class="rounded-full bg-slate-200 px-1.5 text-xs tabular-nums dark:bg-slate-700">3</span>
    </button>
  </div>
</div>

Разбор

Класс	Зачем
`inline-flex rounded-lg bg-slate-100 p-1`	контейнер-«таблетка» для сегментов
`bg-white shadow-sm`	активный сегмент
`-mb-px`	накладывает линию вкладок на границу контейнера
`border-b-2 border-transparent`	резерв места под подчёркивание
`aria-selected`	состояние вкладки для скринридера
`flex w-40 shrink-0 flex-col`	вертикальный вариант

Вариант на shadcn/ui

<Tabs defaultValue="overview">
  <TabsList>
    <TabsTrigger value="overview">Обзор</TabsTrigger>
    <TabsTrigger value="analytics">Аналитика</TabsTrigger>
  </TabsList>
  <TabsContent value="overview">…</TabsContent>
  <TabsContent value="analytics">…</TabsContent>
</Tabs>

Компонент добавляет навигацию стрелками и связь вкладки с панелью через ARIA — вручную это писать не нужно.

Частые ошибки

Вкладки на div без ролей и клавиатурной навигации.
Вкладками сделана навигация между страницами — нужны ссылки.
Больше пяти-шести вкладок: рассмотрите список или разделы.
Активная вкладка отличается только цветом текста — слабый сигнал.
Содержимое вкладки скрыто через opacity-0: остаётся в обходе клавиатурой.