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

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

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

<template>
  <div class="demo-col" style="max-width: 640px; gap: 20px">
    <LhBreadcrumb>
      <LhBreadcrumbItem>Главная</LhBreadcrumbItem>
      <LhBreadcrumbItem>Живопись эпохи Сун</LhBreadcrumbItem>
      <LhBreadcrumbItem :to="'#'">Фань Куань</LhBreadcrumbItem>
      <LhBreadcrumbItem>Путешествие среди гор и ручьёв</LhBreadcrumbItem>
    </LhBreadcrumb>
    <LhBreadcrumb separator="/">
      <LhBreadcrumbItem>Главная</LhBreadcrumbItem>
      <LhBreadcrumbItem :to="'#'" replace>Свиток пейзажей</LhBreadcrumbItem>
      <LhBreadcrumbItem>Текущая страница</LhBreadcrumbItem>
    </LhBreadcrumb>
    <p class="demo-note">maxItems сворачивает длинную цепочку (первый пункт + многоточие + последние пункты)</p>
    <LhBreadcrumb :max-items="3">
      <LhBreadcrumbItem>Главная</LhBreadcrumbItem>
      <LhBreadcrumbItem>Коллекция</LhBreadcrumbItem>
      <LhBreadcrumbItem>Эпоха Сун</LhBreadcrumbItem>
      <LhBreadcrumbItem>Фань Куань</LhBreadcrumbItem>
      <LhBreadcrumbItem>Путешествие среди гор и ручьёв</LhBreadcrumbItem>
    </LhBreadcrumb>
  </div>
</template>

Breadcrumb Props

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

BreadcrumbItem Props

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

Slots

Слот	Описание
BreadcrumbItem default	Текст пункта
BreadcrumbItem separator	Разделитель отдельного пункта (приоритет над родительским separator)