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

Навигация по иерархическому пути. Построено на семантике нативных nav + ol: текущая страница автоматически помечается aria-current="page" и не является кликабельной; поддерживаются пользовательский разделитель и сворачивание при превышении лимита.

Базовое использование

Базовое использование

1. Главная
2. Компоненты
3. Breadcrumb

<script setup lang="ts">
</script>

<template>
  <LhBreadcrumb>
    <LhBreadcrumbItem>Главная</LhBreadcrumbItem>
    <LhBreadcrumbItem>Компоненты</LhBreadcrumbItem>
    <LhBreadcrumbItem>Breadcrumb</LhBreadcrumbItem>
  </LhBreadcrumb>
</template>

<script>
export default {}
</script>

<template>
  <LhBreadcrumb>
    <LhBreadcrumbItem>Главная</LhBreadcrumbItem>
    <LhBreadcrumbItem>Компоненты</LhBreadcrumbItem>
    <LhBreadcrumbItem>Breadcrumb</LhBreadcrumbItem>
  </LhBreadcrumb>
</template>

Навигация по ссылкам

Навигация по ссылкам

1. Главная
2. Руководство
3. Текущая страница

Режим replace

1. Заменить историю
2. Текущая страница

<script setup lang="ts">
</script>

<template>
  <!-- Навигация по ссылкам -->
  <LhBreadcrumb>
    <LhBreadcrumbItem to="/">Главная</LhBreadcrumbItem>
    <LhBreadcrumbItem to="/guide">Руководство</LhBreadcrumbItem>
    <LhBreadcrumbItem>Текущая страница</LhBreadcrumbItem>
  </LhBreadcrumb>
  <!-- Режим replace -->
  <LhBreadcrumb>
    <LhBreadcrumbItem to="/" replace>Заменить историю</LhBreadcrumbItem>
    <LhBreadcrumbItem>Текущая страница</LhBreadcrumbItem>
  </LhBreadcrumb>
</template>

<script>
export default {}
</script>

<template>
  <!-- Навигация по ссылкам -->
  <LhBreadcrumb>
    <LhBreadcrumbItem to="/">Главная</LhBreadcrumbItem>
    <LhBreadcrumbItem to="/guide">Руководство</LhBreadcrumbItem>
    <LhBreadcrumbItem>Текущая страница</LhBreadcrumbItem>
  </LhBreadcrumb>
  <!-- Режим replace -->
  <LhBreadcrumb>
    <LhBreadcrumbItem to="/" replace>Заменить историю</LhBreadcrumbItem>
    <LhBreadcrumbItem>Текущая страница</LhBreadcrumbItem>
  </LhBreadcrumb>
</template>

Элементы с to рендерятся как <a>; при обнаружении vue-router переход идёт через маршрутизатор (replace управляет заменой записи истории), иначе сохраняется нативная навигация. Последний элемент всегда рендерится как текст текущей страницы.

Пользовательский разделитель

Пользовательский разделитель

1. Главная
2. Компоненты
3. Отдельный разделитель

<script setup lang="ts">
</script>

<template>
  <LhBreadcrumb separator="·">
    <LhBreadcrumbItem to="/">Главная</LhBreadcrumbItem>
    <LhBreadcrumbItem to="/components">Компоненты</LhBreadcrumbItem>
    <LhBreadcrumbItem>
      <template #separator>➜</template>
      Отдельный разделитель
    </LhBreadcrumbItem>
  </LhBreadcrumb>
</template>

<script>
export default {}
</script>

<template>
  <LhBreadcrumb separator="·">
    <LhBreadcrumbItem to="/">Главная</LhBreadcrumbItem>
    <LhBreadcrumbItem to="/components">Компоненты</LhBreadcrumbItem>
    <LhBreadcrumbItem>
      <template #separator>➜</template>
      Отдельный разделитель
    </LhBreadcrumbItem>
  </LhBreadcrumb>
</template>

Сворачивание при превышении

Сворачивание при превышении

1. Главная
2. Каталог уровня 1 A
3. Каталог уровня 2 B
4. Каталог уровня 3 C
5. Текущая страница

<script setup lang="ts">
</script>

<template>
  <LhBreadcrumb :max-items="3">
    <LhBreadcrumbItem to="/">Главная</LhBreadcrumbItem>
    <LhBreadcrumbItem to="/a">Каталог уровня 1 A</LhBreadcrumbItem>
    <LhBreadcrumbItem to="/a/b">Каталог уровня 2 B</LhBreadcrumbItem>
    <LhBreadcrumbItem to="/a/b/c">Каталог уровня 3 C</LhBreadcrumbItem>
    <LhBreadcrumbItem>Текущая страница</LhBreadcrumbItem>
  </LhBreadcrumb>
</template>

<script>
export default {}
</script>

<template>
  <LhBreadcrumb :max-items="3">
    <LhBreadcrumbItem to="/">Главная</LhBreadcrumbItem>
    <LhBreadcrumbItem to="/a">Каталог уровня 1 A</LhBreadcrumbItem>
    <LhBreadcrumbItem to="/a/b">Каталог уровня 2 B</LhBreadcrumbItem>
    <LhBreadcrumbItem to="/a/b/c">Каталог уровня 3 C</LhBreadcrumbItem>
    <LhBreadcrumbItem>Текущая страница</LhBreadcrumbItem>
  </LhBreadcrumb>
</template>

При превышении maxItems сохраняются первый элемент, многоточие и несколько последних элементов; по клику на многоточие разворачивается полный список.

Breadcrumb API

Props

Свойство	Описание	Тип	По умолчанию
separator	Символ разделителя	string	'/'
maxItems	Максимальное число видимых элементов (первый + многоточие + несколько последних); при превышении — сворачивание	number	0
sx	Сокращённые свойства компоновки sx	LhSxProps	—

LhBreadcrumbItem Props

Свойство	Описание	Тип	По умолчанию
to	Адрес перехода; если задан и элемент не последний, рендерится ссылкой	string	—
replace	Использовать ли replace при переходе через vue-router	boolean	false

Slots

Слот	Описание	Компонент
default	Элемент хлебных крошек	LhBreadcrumb
default	Содержимое элемента	LhBreadcrumbItem
separator	Пользовательский разделитель (переопределяет глобальный separator)	LhBreadcrumbItem

Доступность

• Корневой элемент — <nav aria-label> (берётся из языкового пакета breadcrumb.label), содержащий <ol>; семантический порядок совпадает с порядком в документе
• Текущая страница (последний элемент) рендерится текстом с автоматическим aria-current="page"; не кликабельна, даже если передать to
• Разделитель помечен aria-hidden="true" и не попадает в дерево доступности
• Многоточие сворачивания — настоящий <button> с aria-label из языкового пакета breadcrumb.more; по клику разворачивает все элементы

Типы

TypeScript-типы, экспортируемые этим компонентом (извлечены автоматически из packages/components/breadcrumb/src/types.ts и исходников @lh-ui/share/core/*; раскройте нужный пункт, чтобы увидеть полное определение; описания свойств — в таблице Props выше):

LhBreadcrumbProps

export interface LhBreadcrumbProps {
  /** Символ разделителя */
  separator?: string
  /** Максимальное число видимых элементов (первый + многоточие + несколько последних); при превышении — сворачивание; 0 или отсутствие значения означает «не сворачивать» */
  maxItems?: number
  /** Сокращённые свойства компоновки sx */
  sx?: LhSxProps
}

LhBreadcrumbItemProps

export interface LhBreadcrumbItemProps {
  /** Адрес перехода; если задан и элемент не последний, рендерится ссылкой (при обнаружении vue-router переход через маршрутизатор, иначе нативная навигация) */
  to?: string
  /** Использовать ли replace при переходе через vue-router (без маршрутизатора не действует) */
  replace?: boolean
}