Breadcrumb для навигационных цепочек

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

Основная структура компонента

В Carbon Components Svelte Breadcrumb представлен двумя ключевыми частями: контейнером Breadcrumb и отдельными элементами BreadcrumbItem. Контейнер определяет общую область навигационной цепочки, а элементы формируют последовательность ссылок.

<script>
  import { Breadcrumb, BreadcrumbItem } from 'carbon-components-svelte';
</script>

<Breadcrumb>
  <BreadcrumbItem href="/">Главная</BreadcrumbItem>
  <BreadcrumbItem href="/products">Продукты</BreadcrumbItem>
  <BreadcrumbItem href="/products/widgets" isCurrentPage>Виджеты</BreadcrumbItem>
</Breadcrumb>

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

  • href указывает ссылку на страницу, куда ведёт элемент.
  • isCurrentPage — атрибут, обозначающий текущий активный элемент цепочки. Важно для правильного семантического отображения и доступности (ARIA).

Настройка стилей и классов

Carbon Components Svelte позволяет задавать пользовательские классы и стили каждому элементу цепочки:

<Breadcrumb class="my-breadcrumb">
  <BreadcrumbItem class="breadcrumb-link" href="/">Главная</BreadcrumbItem>
  <BreadcrumbItem class="breadcrumb-link" href="/products">Продукты</BreadcrumbItem>
  <BreadcrumbItem class="breadcrumb-current" href="/products/widgets" isCurrentPage>Виджеты</BreadcrumbItem>
</Breadcrumb>
  • class на Breadcrumb изменяет стили контейнера.
  • class на BreadcrumbItem позволяет кастомизировать отдельные ссылки.

Дополнительно можно использовать CSS-переменные Carbon для более тонкой настройки цветов, шрифтов и отступов.

Поддержка реактивности Svelte

Так как Carbon Components Svelte полностью интегрируется с реактивными переменными Svelte, Breadcrumb можно строить динамически, на основе массива объектов:

<script>
  import { Breadcrumb, BreadcrumbItem } from 'carbon-components-svelte';

  let path = [
    { title: 'Главная', href: '/' },
    { title: 'Продукты', href: '/products' },
    { title: 'Виджеты', href: '/products/widgets', current: true }
  ];
</script>

<Breadcrumb>
  {#each path as item}
    <BreadcrumbItem href={item.href} isCurrentPage={item.current}>
      {item.title}
    </BreadcrumbItem>
  {/each}
</Breadcrumb>

Такой подход упрощает генерацию навигации на основе данных из API или состояния приложения.

Доступность (Accessibility, ARIA)

Компонент Breadcrumb в Carbon Components Svelte уже включает базовую поддержку ARIA:

  • Контейнер Breadcrumb имеет nav и aria-label="breadcrumb".
  • Элементы с isCurrentPage получают aria-current="page".

Для улучшенной доступности можно вручную добавить дополнительные атрибуты или обработчики событий, если цепочка строится динамически.

<Breadcrumb aria-label="Навигация по разделам">
  <BreadcrumbItem href="/">Главная</BreadcrumbItem>
  <BreadcrumbItem href="/products">Продукты</BreadcrumbItem>
  <BreadcrumbItem href="/products/widgets" isCurrentPage>Виджеты</BreadcrumbItem>
</Breadcrumb>

Интеграция с роутингом

Breadcrumb идеально работает с Svelte роутерами. Для приложений, где URL динамически изменяется, можно использовать реактивные переменные и привязку к роутеру:

<script>
  import { Breadcrumb, BreadcrumbItem } from 'carbon-components-svelte';
  import { page } from '$app/stores'; // пример для SvelteKit

  $: pathSegments = $page.url.pathname.split('/').filter(Boolean);
</script>

<Breadcrumb>
  <BreadcrumbItem href="/">Главная</BreadcrumbItem>
  {#each pathSegments as segment, index}
    <BreadcrumbItem 
      href={"/" + pathSegments.slice(0, index + 1).join("/")} 
      isCurrentPage={index === pathSegments.length - 1}>
      {segment}
    </BreadcrumbItem>
  {/each}
</Breadcrumb>

Такой метод позволяет автоматически строить цепочку навигации в зависимости от текущего URL.

Особенности и тонкости использования

  1. Текст элементов: избегать слишком длинных текстов, так как Breadcrumb должен оставаться компактным.
  2. Скроллинг при длинных цепочках: Carbon предоставляет стили для обрезки текста с помощью text-overflow: ellipsis.
  3. Иконки и разделители: по умолчанию используются стандартные стрелки; можно заменить на кастомные через CSS или слот divider.
<Breadcrumb divider=">">
  <BreadcrumbItem href="/">Главная</BreadcrumbItem>
  <BreadcrumbItem href="/products">Продукты</BreadcrumbItem>
  <BreadcrumbItem href="/products/widgets" isCurrentPage>Виджеты</BreadcrumbItem>
</Breadcrumb>
  • Атрибут divider позволяет изменить символ разделителя между элементами.

Использование слотов для кастомизации

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

<Breadcrumb>
  <BreadcrumbItem href="/">
    <span slot="prefix">?</span>Главная
  </BreadcrumbItem>
  <BreadcrumbItem href="/products">Продукты</BreadcrumbItem>
  <BreadcrumbItem href="/products/widgets" isCurrentPage>Виджеты</BreadcrumbItem>
</Breadcrumb>

Слот prefix позволяет добавить иконку или другой элемент перед текстом.

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

Оглавление