Введение

При разработке современных веб-интерфейсов на Bootstrap 5 часто требуется реализовать пользовательский блок в навигации, который на десктопных устройствах отображает имя пользователя, аватар и выпадающее меню, а на мобильных устройствах — только аватар с выпадающим меню.

В этой статье я покажу оптимальный способ реализации такой задачи с использованием встроенных адаптивных утилит Bootstrap 5.

Готовое решение

Измените ширину окна браузера, чтобы увидеть, как имя скрывается на мобильных устройствах

HTML-код

<nav class="navbar navbar-expand-lg bg-body-tertiary">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Мой проект</a>

    <div class="ms-auto d-flex align-items-center">
      <div class="dropdown">
        <a href="#" class="d-flex align-items-center link-dark text-decoration-none dropdown-toggle" id="userDropdown" data-bs-toggle="dropdown" aria-expanded="false">
          <span class="d-none d-lg-inline me-2 fw-semibold">Алексей Иванов</span>
          <img src="avatar.jpg" alt="Аватар" width="36" height="36" class="rounded-circle border">
        </a>

        <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="userDropdown">
          <li><a class="dropdown-item" href="#">Профиль</a></li>
          <li><a class="dropdown-item" href="#">Настройки</a></li>
          <li><hr class="dropdown-divider"></li>
          <li><a class="dropdown-item" href="#">Выйти</a></li>
        </ul>
      </div>
    </div>
  </div>
</nav>

Как это работает

1. Единый компонент выпадающего списка

Вся конструкция построена вокруг одного <div class="dropdown">. Это обеспечивает единое поведение и упрощает поддержку кода.

2. Адаптивное отображение имени

Ключевая хитрость заключается в использовании классов Bootstrap для адаптивности:

  • d-none — скрывает элемент на всех экранах;
  • d-lg-inline — показывает элемент как инлайн на экранах шире 992px (размер lg).

Комбинация d-none d-lg-inline означает, что элемент будет скрыт на мобильных устройствах и виден только на десктопах.

3. Аватар всегда на виду

Изображение аватара не имеет адаптивных классов и поэтому отображается на всех размерах экрана.

4. Единое выпадающее меню

Меню действий одно для всех устройств. При необходимости на мобильных можно добавить имя пользователя внутри меню.

Преимущества подхода

  • Минимальное дублирование кода — вся логика собрана в одном месте;
  • Простота поддержки — изменения вносятся один раз;
  • Использование стандартных классов Bootstrap — не требуется дополнительных CSS-правил;
  • Единообразное поведение — выпадающее меню работает одинаково на всех устройствах.

Дополнительные рекомендации

Отображение имени внутри мобильного меню

Чтобы на мобильных устройствах пользователь видел своё имя внутри выпадающего меню, добавьте следующий код в <ul>:

<li><span class="dropdown-item-text fw-semibold">Алексей Иванов</span></li>
<li><hr class="dropdown-divider"></li>

Интеграция с WordPress

Для использования в теме WordPress замените статические данные на динамические:

<?php
$current_user = wp_get_current_user();
$user_name = $current_user->display_name;
$avatar_url = get_avatar_url($current_user->ID, ['size' => 36]);
?>

Заключение

Представленный подход демонстрирует силу адаптивных утилит Bootstrap 5. Используя всего один компонент и пару классов, можно создать гибкий интерфейс, который корректно отображается на всех типах устройств.

Этот метод не только экономит время разработки, но и делает код более чистым и поддерживаемым.

Полезные ссылки:
— Документация Bootstrap 5 — Dropdowns
— Утилиты отображения Bootstrap