Навигационные компоненты

Навигация является фундаментальной частью любой веб-приложения, обеспечивая пользователю доступ к различным разделам и функционалу. В SvelteKit, благодаря реактивной архитектуре и удобной интеграции с UI-библиотеками, создание навигационных компонентов становится более структурированным и гибким. Рассмотрим основные подходы и практические примеры.

Роутинг и навигационные ссылки

SvelteKit использует файловую структуру маршрутов для определения страниц. Каждая .svelte или .ts страница внутри папки src/routes автоматически становится маршрутом. Для навигации между страницами применяется компонент <a> или специализированный sveltekit:prefetch.

Пример базовой ссылки:

<a href="/about" sveltekit:prefetch>О нас</a>
  • sveltekit:prefetch инициирует предварительную загрузку данных страницы при наведении курсора, что ускоряет навигацию.
  • Важно соблюдать семантику <a> для доступности и SEO.

Многие UI-библиотеки, интегрированные с SvelteKit, предоставляют собственные компоненты для ссылок, поддерживающие стилизацию и состояния. Например, в библиотеке Svelte Material UI (SMUI) используется компонент Button с пропсом href:

<script>
  import { Button } from '@smui/button';
</script>

<Button href="/dashboard" variant="raised">Панель управления</Button>
  • Компонент автоматически обрабатывает hover, active и focus состояния.
  • Можно сочетать с sveltekit:prefetch через атрибут use:prefetch.

Динамическая навигация и реактивные ссылки

Для приложений с динамическими маршрутами важно строить ссылки на основе реактивных данных. SvelteKit и UI-библиотеки позволяют использовать stores для управления текущим маршрутом:

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

<nav>
  <a href="/home" class:selected={currentPath === '/home'}>Главная</a>
  <a href="/profile" class:selected={currentPath === '/profile'}>Профиль</a>
</nav>

<style>
  .selected {
    font-weight: bold;
    border-bottom: 2px solid #0070f3;
  }
</style>
  • class:selected — реактивно обновляет состояние активного маршрута.
  • Стилизация активной ссылки улучшает UX и помогает пользователю ориентироваться.

Меню и навигационные панели

Навигационные панели, особенно с выпадающими меню или боковыми панелями, являются стандартным элементом крупных интерфейсов. UI-библиотеки предоставляют готовые компоненты для реализации сложной навигации.

Пример бокового меню с SvelteKit и Svelte Material UI:

<script>
  import { Drawer, DrawerContent, DrawerHeader } from '@smui/drawer';
  import { List, ListItem } from '@smui/list';
</script>

<Drawer variant="modal" open>
  <DrawerHeader>Меню</DrawerHeader>
  <DrawerContent>
    <List>
      <ListItem href="/dashboard">Панель управления</ListItem>
      <ListItem href="/settings">Настройки</ListItem>
      <ListItem href="/help">Помощь</ListItem>
    </List>
  </DrawerContent>
</Drawer>
  • Drawer поддерживает модальные и перманентные варианты.
  • Сочетание с ListItem позволяет легко реализовать вложенные меню.

Хлебные крошки (Breadcrumbs)

Компонент “хлебные крошки” помогает пользователю понимать текущую позицию в структуре сайта. Реализация через UI-библиотеки упрощается благодаря готовым компонентам.

<script>
  import { Breadcrumbs, BreadcrumbItem } from '@smui/breadcrumbs';
</script>

<Breadcrumbs>
  <BreadcrumbItem href="/">Главная</BreadcrumbItem>
  <BreadcrumbItem href="/products">Продукты</BreadcrumbItem>
  <BreadcrumbItem href="/products/123" active>Товар 123</BreadcrumbItem>
</Breadcrumbs>
  • active обозначает текущую страницу.
  • Автоматическая адаптация к SvelteKit маршрутам повышает удобство и сокращает количество ручного кода.

Навигация с использованием goto

Иногда требуется программная навигация без использования <a>. Для этого применяется функция goto из $app/navigation:

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

  function navigateToProfile() {
    goto('/profile');
  }
</script>

<button on:click={navigateToProfile}>Перейти в профиль</button>
  • Позволяет реализовать переходы после действий, валидации форм или логики авторизации.
  • Можно комбинировать с анимацией и состояниями загрузки.

Отзывчивость и адаптивная навигация

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

<script>
  let open = false;
</script>

<button on:click={() => (open = !open)}>Меню</button>

<nav class:open={open}>
  <a href="/home">Главная</a>
  <a href="/about">О нас</a>
</nav>

<style>
  nav {
    display: none;
  }
  nav.open {
    display: block;
  }
</style>
  • Простой подход для адаптивной навигации без внешних библиотек.
  • UI-библиотеки часто предоставляют готовые Drawer или AppBar компоненты с такими функциональностями.

Иерархическая и вложенная навигация

Для сложных приложений важна поддержка многоуровневых меню. Комбинация List, Collapse и реактивных переменных позволяет строить вложенные структуры.

<script>
  import { List, ListItem, ListGroup } from '@smui/list';
  let expanded = false;
</script>

<List>
  <ListItem on:click={() => (expanded = !expanded)}>Продукты</ListItem>
  {#if expanded}
    <ListGroup>
      <ListItem href="/products/1">Товар 1</ListItem>
      <ListItem href="/products/2">Товар 2</ListItem>
    </ListGroup>
  {/if}
</List>
  • ListGroup визуально отделяет вложенные элементы.
  • Реактивные переменные управляют состоянием раскрытия.

Преимущества использования UI-библиотек для навигации в SvelteKit

  • Ускорение разработки: готовые компоненты, преднастроенные стили, поддержка адаптивности.
  • Консистентность интерфейса: одинаковые состояния hover, focus, active по всему приложению.
  • Интеграция с роутингом: автоматическая работа с href, goto, sveltekit:prefetch.
  • Анимации и интерактивность: встроенные эффекты раскрытия, переходов и hover-анимации.

Навигационные компоненты в SvelteKit с UI-библиотеками обеспечивают удобный, гибкий и легко расширяемый интерфейс, позволяя создавать как простые ссылки, так и сложные адаптивные панели с вложенными структурами.

Оглавление