Menubar

Menubar — это компонент пользовательского интерфейса, предназначенный для организации навигации и доступа к действиям приложения через горизонтальное или вертикальное меню. В SvelteKit UI библиотеках Menubar обычно реализуется как высокоуровневый компонент с вложенными элементами, такими как MenubarItem, MenubarTrigger и MenubarContent.

Структура компонентов Menubar

1. Menubar

Главный контейнер меню, который определяет его ориентацию и стиль. Чаще всего принимает следующие свойства:

  • orientation — 'horizontal' или 'vertical'. Определяет направление отображения меню.
  • class — кастомные CSS-классы для стилизации.
  • loop — логическое значение; если true, навигация по элементам с клавиатуры циклична.

Пример:

<Menubar orientation="horizontal" class="bg-gray-100 p-2">
  <MenubarItem>Файл</MenubarItem>
  <MenubarItem>Правка</MenubarItem>
  <MenubarItem>Вид</MenubarItem>
</Menubar>

2. MenubarItem

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

  • disabled — делает пункт недоступным.
  • on:select — событие выбора элемента.
  • class — пользовательские стили.

Пример:

<MenubarItem on:select={() => console.log('Файл выбран')}>
  Файл
</MenubarItem>

3. MenubarTrigger

Элемент, который открывает вложенное подменю. Обычно используется вместе с MenubarContent. Позволяет создавать сложные структуры, включая многослойные выпадающие меню.

Пример:

<MenubarItem>
  <MenubarTrigger>Файл</MenubarTrigger>
  <MenubarContent>
    <MenubarItem>Создать</MenubarItem>
    <MenubarItem>Открыть</MenubarItem>
    <MenubarItem>Сохранить</MenubarItem>
  </MenubarContent>
</MenubarItem>

4. MenubarContent

Контейнер для вложенных пунктов меню, который отображается при активации MenubarTrigger. Поддерживает кастомизацию стилей и анимаций.

Пример:

<MenubarContent class="bg-white shadow-lg rounded-md p-2">
  <MenubarItem on:select={createFile}>Создать</MenubarItem>
  <MenubarItem on:select={openFile}>Открыть</MenubarItem>
  <MenubarItem on:select={saveFile}>Сохранить</MenubarItem>
</MenubarContent>

Работа с клавиатурой и доступностью

Menubar в SvelteKit UI полностью поддерживает ARIA-атрибуты и управление с клавиатуры:

  • Стрелки — перемещение между элементами меню.
  • Enter / Space — активация выбранного элемента или подменю.
  • Escape — закрытие открытого подменю.
  • Tab — переход между группами меню при вертикальной ориентации.

Важно корректно использовать role="menu" и role="menuitem" в кастомных реализациях для соответствия стандартам доступности.

Стилизация и темы

SvelteKit UI Menubar допускает:

  • TailwindCSS классы для быстрого прототипирования.
  • CSS-переменные для настройки цветов, размеров и отступов.
  • Слоты для кастомного рендеринга контента внутри пунктов меню.

Пример с Tailwind:

<Menubar class="bg-blue-600 text-white rounded-lg p-2">
  <MenubarItem class="hover:bg-blue-500 px-3 py-1">Файл</MenubarItem>
  <MenubarItem class="hover:bg-blue-500 px-3 py-1">Правка</MenubarItem>
</Menubar>

Динамическое создание пунктов меню

Menubar удобно использовать с массивами данных для генерации меню:

<script>
  const menuItems = [
    { label: 'Файл', actions: ['Создать', 'Открыть', 'Сохранить'] },
    { label: 'Правка', actions: ['Отменить', 'Повторить', 'Вырезать'] }
  ];
</script>

<Menubar>
  {#each menuItems as item}
    <MenubarItem>
      <MenubarTrigger>{item.label}</MenubarTrigger>
      <MenubarContent>
        {#each item.actions as action}
          <MenubarItem on:select={() => console.log(action)}>{action}</MenubarItem>
        {/each}
      </MenubarContent>
    </MenubarItem>
  {/each}
</Menubar>

Такой подход упрощает масштабирование меню и интеграцию с динамическими данными из API.

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

  • Навигация: MenubarItem может содержать <a> или использовать goto из $app/navigation.
  • Состояние приложения: Управление открытием подменю через Svelte stores.
  • SSR: Меню полностью совместимо с серверным рендерингом, сохраняя корректную структуру DOM и доступность.

Пример с навигацией SvelteKit:

<script>
  import { goto } from '$app/navigation';
</script>

<Menubar>
  <MenubarItem on:select={() => goto('/dashboard')}>Дашборд</MenubarItem>
  <MenubarItem on:select={() => goto('/settings')}>Настройки</MenubarItem>
</Menubar>

Menubar в SvelteKit UI — это гибкий инструмент для создания удобных и доступных меню, поддерживающий кастомизацию, динамическое наполнение, работу с клавиатурой и интеграцию с маршрутизацией SvelteKit. Правильная комбинация Menubar, MenubarTrigger и MenubarContent позволяет строить как простые панели навигации, так и сложные многослойные меню с динамическим контентом.

Оглавление