HeaderNav и HeaderNavItem

HeaderNav — это компонент, который отвечает за создание основной навигационной панели верхнего уровня. Он предназначен для размещения элементов навигации (HeaderNavItem), сгруппированных по смыслу и предоставляющих пользователю доступ к различным разделам приложения или сайта. В Carbon Components Svelte HeaderNav реализуется как контейнер, который управляет расположением и поведением дочерних элементов.

Структура HeaderNav

Компонент HeaderNav в Svelte создается с использованием тега <HeaderNav> и может содержать любое количество элементов <HeaderNavItem>. Стандартная структура выглядит следующим образом:

<HeaderNav>
  <HeaderNavItem href="/home">Главная</HeaderNavItem>
  <HeaderNavItem href="/about">О проекте</HeaderNavItem>
  <HeaderNavItem href="/contact">Контакты</HeaderNavItem>
</HeaderNav>

Ключевые моменты:

  • href — ссылка, на которую будет вести навигационный элемент.
  • Текстовое содержимое — отображается в интерфейсе как название пункта меню.
  • Дочерние элементы — HeaderNav может содержать дополнительные компоненты, например, выпадающие меню, если требуется более сложная структура.

HeaderNavItem: свойства и возможности

HeaderNavItem представляет отдельный пункт навигации и поддерживает ряд свойств для тонкой настройки:

  1. href — адрес для перехода.
  2. isActive — булевое значение, определяющее активный элемент. Обычно используется для выделения текущей страницы.
  3. icon — позволяет добавить иконку слева от текста. В Svelte это может быть реализовано через слот или импорт иконки из Carbon Icons.
  4. disabled — делает элемент неактивным, предотвращая взаимодействие.
  5. Слоты — HeaderNavItem поддерживает слоты, позволяя внедрять кастомные элементы внутри пункта меню, например, небольшие бейджи уведомлений.

Пример использования с активным пунктом и иконкой:

<HeaderNav>
  <HeaderNavItem href="/dashboard" isActive={true}>
    <DashboardIcon slot="icon" />
    Панель управления
  </HeaderNavItem>
  <HeaderNavItem href="/settings">
    <SettingsIcon slot="icon" />
    Настройки
  </HeaderNavItem>
</HeaderNav>

Стилизация и классы

Carbon Components Svelte наследует стили из Carbon Design System, что обеспечивает единообразие внешнего вида. Для HeaderNav и HeaderNavItem доступны стандартные CSS-классы:

  • bx--header__nav — базовый класс для контейнера HeaderNav.
  • bx--header__nav-item — базовый класс для пункта навигации.
  • bx--header__nav-link--active — класс, применяемый к активному элементу.
  • Возможность добавления пользовательских классов через class позволяет расширять стандартную стилизацию.

Пример с кастомным классом:

<HeaderNav class="custom-header-nav">
  <HeaderNavItem href="/profile" class="custom-nav-item">
    Профиль
  </HeaderNavItem>
</HeaderNav>

Взаимодействие и управление состоянием

HeaderNavItem может быть интегрирован с системой маршрутизации Svelte (например, SvelteKit), чтобы динамически менять состояние isActive в зависимости от текущего URL. Это позволяет создавать интерактивные и отзывчивые навигационные панели.

Пример интеграции с реактивным состоянием:

<script>
  import { page } from '$app/stores';
  let currentPath = '';
  $: currentPath = $page.url.pathname;
</script>

<HeaderNav>
  <HeaderNavItem href="/home" isActive={currentPath === '/home'}>Главная</HeaderNavItem>
  <HeaderNavItem href="/about" isActive={currentPath === '/about'}>О проекте</HeaderNavItem>
</HeaderNav>

Использование вложенных меню

Для сложных интерфейсов HeaderNavItem может включать выпадающие подменю. В Carbon Components Svelte это реализуется через вложенные компоненты <HeaderMenu> и <HeaderMenuItem>, которые располагаются внутри HeaderNavItem.

Пример вложенного меню:

<HeaderNav>
  <HeaderNavItem>
    Сервисы
    <HeaderMenu>
      <HeaderMenuItem href="/analytics">Аналитика</HeaderMenuItem>
      <HeaderMenuItem href="/reports">Отчёты</HeaderMenuItem>
    </HeaderMenu>
  </HeaderNavItem>
</HeaderNav>

Особенности:

  • Выпадающее меню управляет состоянием открытия автоматически.
  • Поддерживаются клавиатурные события и доступность (ARIA), что важно для соответствия стандартам WCAG.

Итоговые рекомендации по применению

  • Использовать HeaderNav как контейнер верхнего уровня для всех навигационных элементов.
  • HeaderNavItem должен содержать понятное название и, при необходимости, иконку.
  • Активный элемент следует выделять через isActive для лучшей ориентации пользователя.
  • Для сложных структур использовать HeaderMenu и HeaderMenuItem, не перегружая интерфейс.
  • Кастомизация через CSS-классы позволяет интегрировать навигацию в любой дизайн без нарушения консистентности Carbon.

HeaderNav и HeaderNavItem образуют основу навигационной системы в Carbon Components Svelte, обеспечивая гибкость, доступность и визуальную согласованность интерфейсов приложений.

Оглавление