Breadcrumbs

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

Статус: experimental · в системе с 2026-07 · интерактивность: always (всегда)

Когда использовать

Страница находится глубже одного уровня в устойчивой иерархии.
Пользователю полезно перейти к родительскому разделу без возврата по истории браузера.

Не использовать:

Приложение плоское и у страницы нет понятных предков.
Нужно показать последовательность шагов процесса — используй Steps.
Нужно показать историю посещений — Breadcrumbs описывает структуру, а не прошлые переходы.

Альтернативы:

link — Одиночный возврат к одному месту не требует навигационной цепочки.

Иерархический путь

Предки являются ссылками, текущая страница завершает цепочку.

<!--
  🟢

  Базовый пример Breadcrumbs показывает путь к странице одного компонента.
  Родительские уровни доступны как ссылки, текущий уровень завершает цепочку.
-->

<script>
import { t } from "$lib/spec/demo-lang.svelte.js";
import Breadcrumbs from "$lib/ui/Breadcrumbs.svelte";

const items = [
	{ label: t("Начать работу"), href: "/" },
	{ label: t("Компоненты"), href: "/overview" },
	{ label: "Breadcrumbs" },
];
</script>

<Breadcrumbs {items} />

Длинные названия

Подписи сокращаются визуально и не разрушают строку.

<!--
  🟢

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

<script>
import { t } from "$lib/spec/demo-lang.svelte.js";
import Breadcrumbs from "$lib/ui/Breadcrumbs.svelte";

const items = [
	{ label: t("Управление рекламными кампаниями"), href: "/" },
	{ label: t("Кампании для продвижения нового продукта"), href: "/overview" },
	{ label: t("Основные настройки кампании") },
];
</script>

<Breadcrumbs {items} />