Хлебные крошки

Хлебные крошки говорят, где расположена страница. Последний элемент — текущая страница: он рисуется обычным текстом и помечается aria-current="page", потому что ссылка на страницу, где вы уже находитесь, — это шум.

Простые крошки

breadcrumbs({
  items: [
    { label: 'Главная', href: '/' },
    { label: 'Документация', href: '/docs' },
    { label: 'Маршрутизация' },
  ],
})

Разделитель

Любая строка или разметка. В любом случае разделители скрыты от скринридеров.

stack({ gap: 'md' },
  breadcrumbs({
    separator: '/',
    items: [{ label: 'Главная', href: '/' }, { label: 'UI', href: '/ui' }, { label: 'Хлебные крошки' }],
  }),
  breadcrumbs({
    separator: '›',
    items: [{ label: 'Главная', href: '/' }, { label: 'UI', href: '/ui' }, { label: 'Хлебные крошки' }],
  }),
  breadcrumbs({
    separator: '·',
    items: [{ label: 'Главная', href: '/' }, { label: 'UI', href: '/ui' }, { label: 'Хлебные крошки' }],
  }),
)

Обычные строки

Элемент без href — просто текст, где бы он ни стоял, а не только в конце.

breadcrumbs({
  items: ['Главная', 'Архив', '2026', 'Март'],
})

Из пути

На статическом сайте цепочку обычно выводят из маршрута, а не пишут руками.

return (() => {
  const path = '/docs/guides/routing'
  const segments = path.split('/').filter(Boolean)

  return breadcrumbs({
    items: [
      { label: 'Главная', href: '/' },
      ...segments.map((segment, index) => ({
        label: segment.replace(/-/g, ' '),
        href: index === segments.length - 1 ? undefined : '/' + segments.slice(0, index + 1).join('/'),
      })),
    ],
  })
})()

Подпись для nav

Всё это — <nav> с доступным именем, чтобы скринридер мог к нему перейти. Меняйте имя через label, когда на странице больше одного навигационного ориентира.

breadcrumbs({
  label: 'Хлебные крошки документации',
  items: [{ label: 'Документация', href: '/docs' }, { label: 'Компоненты' }],
})

Пропсы

Проп	Тип	По умолчанию	Описание
`items`	`Array`	`[]`	Строки или объекты { label, href }. Последний — текущая страница.
`separator`	`Child`	`'/'`	Рисуется между элементами, скрыт от скринридеров.
`label`	`string`	`'Breadcrumb'`	Доступное имя ориентира nav.