Breadcrumbs («хлебные крошки»)#

Компонент Breadcrumbs показывает текущее расположение страницы в иерархии приложения.

№

Свойство

Описание

Значение по умолчанию

1

classes

JSS-классы для стилизации. Partial<Record<"ellipsis" / "list" / "root" / "listItem", string>>

-

2

maxItems

Максимальное число «хлебных крошек». Если шагов больше максимального количества, то будут показаны itemsBeforeCollapse и itemsAfterCollapse с разделителем посередине (number)

-

3

itemsAfterCollapse

Если шагов больше максимального количества, сумма шагов после разделителя (number)

-

4

itemsBeforeCollapse

Если шагов больше максимального количества, сумма шагов до разделителя (number)

-

5

dropdownMenuProps

Свойства компонента DropdownMenu (для показа скрытых «хлебных крошек») Pick<DropdownMenuProps<ListElement>, "slot"  "style"  "title"  "className"  "defaultChecked"  "defaultValue"  "suppressContentEditableWarning"  ... 263 more ...  "onStateChange">

-

 
import { Breadcrumbs } from '@v-uik/breadcrumbs'

В основе компонента Breadcrumbs лежит компонент Link, который позволяет пользователю быстро вернуться в предыдущие разделы. Для отображения текущего раздела (последний элемент «хлебных крошек») используйте обычный HTML элемент (span и т.п.).

<Breadcrumbs>
  <Link href="#">Breadcrumb</Link>
  <Link href="#">
    <Icon style={{ marginRight: 8 }} />
    Breadcrumb
  </Link>
  <Link disabled href="#">
    <Icon style={{ marginRight: 8 }} />
    Breadcrumb disabled
  </Link>
  <span>Breadcrumb</span>
</Breadcrumbs>

Скрытие элементов в случае длинного списка#

<Breadcrumbs maxItems={3}>
  <Link href="#">Breadcrumb 1</Link>
  <Link href="#">Breadcrumb 2</Link>
  <Link href="#">Breadcrumb 3</Link>
  <Link href="#">Breadcrumb 4</Link>
  <span>Breadcrumb 5</span>
</Breadcrumbs>

Доступность#

Для обеспечения доступности рекомендуется добавить атрибут aria-label корневому элементу и при необходимости aria-current элементу текущей страницы.