Перейти к контенту
Редактировать эту страницу

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

Хлебные крошки позволяют пользователям выбирать из диапазона значений.

Простые хлебные крошки

<Breadcrumbs aria-label="breadcrumb">
  <Link color="inherit" href="/" onClick={handleClick}>
    Material-UI
  </Link>
  <Link
    color="inherit"
    href="/getting-started/installation/"
    onClick={handleClick}
  >
    Core
  </Link>
  <Typography color="textPrimary">Breadcrumb</Typography>
</Breadcrumbs>

Active last breadcrumb

Keep the last breadcrumb interactive.

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

В следующих примерах мы используем два строковых разделителя и SVG иконку.

Хлебные крошки с иконками

Collapsed хлебные крошки

<Breadcrumbs maxItems={2} aria-label="breadcrumb">
  <Link color="inherit" href="#" onClick={handleClick}>
    Home
  </Link>
  <Link color="inherit" href="#" onClick={handleClick}>
    Catalog
  </Link>
  <Link color="inherit" href="#" onClick={handleClick}>
    Accessories
  </Link>
  <Link color="inherit" href="#" onClick={handleClick}>
    New Collection
  </Link>
  <Typography color="textPrimary">Belts</Typography>
</Breadcrumbs>

Пользовательские хлебные крошки

Ниже находится пример кастомизации компонента. You can learn more about this in the overrides documentation page.

Интеграция с react-router

Доступность

(WAI-ARIA: https://www.w3.org/TR/wai-aria-practices/#breadcrumb)

Убедитесь что добавили aria-label в описание Breadcrumbs компонента.

Доступность этого компонента зависит от:

  • Набор ссылок структурирован с использованием упорядоченного списка (элемент<ol>).
  • Для того, чтобы программа чтения с экрана не объявляла визуальные разделители между ссылками, они скрыты с aria-hidden.
  • Элемент навигации, помеченный aria-label идентифицирует структуру как "след" хлебной крошки и делает ее навигационным ориентиром, чтобы ее можно было легко найти.

API