Табы

Реализовать поведение таба можно через атрибут data-bs-toggle="tab" и data-bs-target (в котором указывается элемент с контентом для текущего таба).

<ul class="nav nav-tabs">
  <li class="nav-item">
    <button class="nav-link active" data-bs-toggle="tab" data-bs-target="#home-tab-pane" type="button">Основной</button>
  </li>
  <li class="nav-item">
    <button class="nav-link" data-bs-toggle="tab" data-bs-target="#profile-tab-pane" type="button">Описание</button>
  </li>
  <li class="nav-item">
    <button class="nav-link" data-bs-toggle="tab" data-bs-target="#contact-tab-pane" type="button">Характеристики</button>
  </li>
  <li class="nav-item">
    <button class="nav-link" data-bs-toggle="tab" data-bs-target="#disabled-tab-pane" type="button"  disabled>Заблокированный</button>
  </li>
</ul>
<div class="tab-content" id="myTabContent">
  <div class="tab-pane fade show active" id="home-tab-pane">Контент для основного таба</div>
  <div class="tab-pane fade" id="profile-tab-pane">Контент для описания</div>
  <div class="tab-pane fade" id="contact-tab-pane">Контент для характеристик</div>
  <div class="tab-pane fade" id="disabled-tab-pane">Контент для заблокированного таба</div>
</div>

Пример кода:

Доступность для таба (WAI-ARIA)

Вёрстку выше можно дополнить aria-атрибутами для вспомогательных устройств, например скринридерам, которая даёт знать, что данные элементы являются табами.

<ul class="nav nav-tabs" role="tablist">
  <li class="nav-item" role="presentation">
    <button class="nav-link active" data-bs-toggle="tab" data-bs-target="#home-tab-pane" type="button" role="tab" aria-selected="true">Основной</button>
  </li>
  <!-- ... -->
</ul>
<div class="tab-content" id="myTabContent">
  <div class="tab-pane fade show active" id="home-tab-pane" role="tabpanel">Контент для основного таба</div>
  <!-- ... -->
</div>