Шаблоны навигации

Навигационные элементы в Carbon Components Svelte строятся на основе набора готовых компонентов, обеспечивающих единообразный пользовательский интерфейс и соответствие дизайну IBM Carbon Design System. Ключевыми являются компоненты Header, HeaderMenu, HeaderGlobalBar, SideNav, SideNavItems и их производные.

Header является основным контейнером для верхней панели приложения. Его использование обеспечивает фиксированное расположение элементов навигации и интеграцию с глобальными инструментами, такими как поиск и пользовательские действия. Основные свойства:

aria-label – текстовая метка для скринридеров, обязательна для доступности.
expanded – логический флаг, отвечающий за состояние раскрытия подменю.
theme – позволяет выбирать цветовую схему (light, dark).

Пример использования:


  Carbon App
  
    
      Опция 1
      Опция 2
    
    
      Опция 3

HeaderMenu и HeaderMenuItem

HeaderMenu создаёт выпадающее меню в шапке приложения. Важные моменты:

Поддержка вложенных подменю осуществляется через повторное использование HeaderMenu внутри HeaderMenuItem.
Событие on:click может быть привязано к элементам для обработки действий без использования стандартной навигации.
HeaderMenuItem поддерживает свойства href, isCurrentPage для выделения активного элемента.

SideNav

SideNav используется для боковой навигации, часто встречается в админ-панелях и корпоративных интерфейсах. Основные свойства:

expanded – состояние раскрытия навигации.
isFixedNav – фиксированное положение на странице.
aria-label – обязательная метка для доступности.

SideNavItems содержат отдельные навигационные ссылки и подменю:


  
    
      Панель
      Отчёты
      
        Настройки
      
    
    Справка

HeaderGlobalBar и HeaderGlobalAction

HeaderGlobalBar предназначен для размещения действий, которые должны быть доступны на любом уровне интерфейса:

Кнопки поиска, уведомлений, профиля пользователя.
HeaderGlobalAction поддерживает icon, label и события on:click.
Поддержка иконок осуществляется через стандартный набор Carbon Icons (например, Search20, Notification20).

Пример:


   console.log('Поиск')} />

Темизация и адаптивность

Все навигационные компоненты поддерживают свойства theme и expanded, что позволяет адаптировать интерфейс под разные устройства:

theme="light" или theme="dark" для соответствия общему стилю приложения.
expanded={true} для десктопной версии и expanded={false} для мобильной, где меню скрывается за кнопкой-гамбургером.
Адаптивное поведение боковой навигации достигается сочетанием SideNav с событием on:toggle.

Доступность

Carbon Components Svelte соблюдает требования WCAG 2.1:

Обязательные атрибуты aria-label и role на навигационных элементах.
Поддержка клавиатурной навигации: Tab, Enter, Space для активации пунктов меню.
Использование фокуса и визуальных состояний isSelected для активного элемента.

Встраивание и маршрутизация

Элементы навигации легко интегрируются с SvelteKit или другими роутерами:

href у HeaderMenuItem и SideNavMenuItem можно заменить на компонент для SPA-навигации.
Обработчики on:click позволяют динамически изменять состояние активного пункта меню без перезагрузки страницы.
Для сложных приложений можно комбинировать HeaderNavigation с SideNav для создания гибкой схемы навигации.