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

Показывает положение текущей страницы в иерархической структуре и позволяет пошагово переходить на уровни выше.

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

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

import { LhBreadcrumb, LhBreadcrumbItem } from '@lh-ui/react'

export default function Demo() {
  return (
    <LhBreadcrumb>
      <LhBreadcrumbItem to="/ru/">Главная</LhBreadcrumbItem>
      <LhBreadcrumbItem to="/ru/components">Компоненты</LhBreadcrumbItem>
      <LhBreadcrumbItem>Хлебные крошки</LhBreadcrumbItem>
    </LhBreadcrumb>
  )
}

Props компонента Breadcrumb

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

Props компонента BreadcrumbItem

Проп	Описание	Тип	По умолчанию
to	Адрес перехода; если задан и элемент не последний, выводится как ссылка	string	—
replace	Сохранено для совместимости с API plus; на нативный переход <a> в React этот флаг не влияет	boolean	false
children	Текст	ReactNode	—

Контролируемое / неконтролируемое состояние

Состояние свёрнутости является внутренним состоянием компонента: нажатие на кнопку с многоточием разворачивает все элементы без вмешательства извне. Передайте 0 в maxItems или не задавайте его, чтобы отключить сворачивание.

Ограничение на дочерние узлы

children должны быть непосредственно элементами LhBreadcrumbItem (можно рендерить через .map); их нельзя оборачивать в пользовательские компоненты — родительский компонент фильтрует типы дочерних элементов через Children.toArray, чтобы проставить индексы, и обёртка приведёт к ошибке при их внедрении. Это согласуется с ограничением на спуск collectPaneVnodes в lh-ui-plus.

Интеграция с маршрутизацией

В экосистеме React нет глобального роутера: ссылки выводятся как нативные <a> и навигация происходит напрямую. При использовании React Router перехватывайте событие через onClick и вызывайте navigate либо самостоятельно рендерите <Link> вместо to.

Доступность

Корневой элемент — <nav aria-label>, список — <ol>; последний элемент выводит aria-current="page", а кнопка с многоточием несёт aria-label (языковой пакет breadcrumb.more).

ref

forwardRef<HTMLElement> — корневой элемент <nav>. LhBreadcrumbItem перенаправляет HTMLLIElement.

Стили

import '@lh-ui/react/theme.css'
import '@lh-ui/react/style/breadcrumb'