Breadcrumbs для навигационной цепочки

Breadcrumbs в Material-UI (MUI) представляют собой компонент для отображения навигационной цепочки, которая помогает пользователям ориентироваться в структуре приложения или сайта. Он обычно используется для отображения пути от главной страницы к текущему расположению пользователя.

import Breadcrumbs from '@mui/material/Breadcrumbs';
import Link from '@mui/material/Link';
import Typography from '@mui/material/Typography';

Создание простой навигационной цепочки осуществляется с использованием компонента Breadcrumbs и вложенных элементов Link или Typography:

<Breadcrumbs aria-label="breadcrumb">
  <Link underline="hover" color="inherit" href="/">
    Главная
  </Link>
  <Link underline="hover" color="inherit" href="/catalog">
    Каталог
  </Link>
  <Typography color="text.primary">Продукт</Typography>
</Breadcrumbs>
  • aria-label="breadcrumb" — обеспечивает доступность компонента для экранных читалок.
  • Link — интерактивные элементы цепочки, по которым можно переходить.
  • Typography — элемент, отображающий текущую страницу, не являющийся ссылкой.

Настройка разделителей

По умолчанию Breadcrumbs использует символ / в качестве разделителя. Можно заменить его на любой другой символ или компонент:

<Breadcrumbs separator="›" aria-label="breadcrumb">
  <Link color="inherit" href="/">
    Главная
  </Link>
  <Link color="inherit" href="/catalog">
    Каталог
  </Link>
  <Typography color="text.primary">Продукт</Typography>
</Breadcrumbs>

Можно использовать иконки или кастомные элементы в качестве разделителей:

import NavigateNextIcon from '@mui/icons-material/NavigateNext';

<Breadcrumbs separator={<NavigateNextIcon fontSize="small" />} aria-label="breadcrumb">
  <Link color="inherit" href="/">
    Главная
  </Link>
  <Link color="inherit" href="/catalog">
    Каталог
  </Link>
  <Typography color="text.primary">Продукт</Typography>
</Breadcrumbs>

Управление стилями и внешним видом

MUI позволяет гибко управлять стилями через sx-пропсы или использование styled API. Например, изменение цвета текущей страницы и ссылок:

<Breadcrumbs
  separator="›"
  aria-label="breadcrumb"
  sx={{
    color: 'grey.600',
    '& .MuiTypography-root': {
      fontWeight: 'bold',
    },
    '& .MuiLink-root': {
      textDecoration: 'none',
      '&:hover': {
        color: 'primary.main',
      },
    },
  }}
>
  <Link color="inherit" href="/">
    Главная
  </Link>
  <Link color="inherit" href="/catalog">
    Каталог
  </Link>
  <Typography color="text.primary">Продукт</Typography>
</Breadcrumbs>

Динамическая генерация Breadcrumbs

Часто навигационная цепочка строится динамически на основе маршрута. Для этого можно использовать массив объектов с названием и ссылкой:

const breadcrumbs = [
  { label: 'Главная', href: '/' },
  { label: 'Каталог', href: '/catalog' },
  { label: 'Продукт', href: null }
];

<Breadcrumbs aria-label="breadcrumb">
  {breadcrumbs.map((item, index) =>
    item.href ? (
      <Link key={index} color="inherit" href={item.href}>
        {item.label}
      </Link>
    ) : (
      <Typography key={index} color="text.primary">{item.label}</Typography>
    )
  )}
</Breadcrumbs>

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

Интеграция с React Router

Для навигации внутри SPA рекомендуется использовать Link из react-router-dom:

import { Link as RouterLink } from 'react-router-dom';
import Link from '@mui/material/Link';

<Breadcrumbs aria-label="breadcrumb">
  <Link component={RouterLink} to="/">
    Главная
  </Link>
  <Link component={RouterLink} to="/catalog">
    Каталог
  </Link>
  <Typography color="text.primary">Продукт</Typography>
</Breadcrumbs>

Использование component={RouterLink} позволяет MUI Link корректно интегрироваться с маршрутизацией React, сохраняя стили и поведение Material-UI.

Управление переполнением

При большом количестве элементов можно использовать свойство maxItems, чтобы показывать сокращённую версию цепочки:

<Breadcrumbs maxItems={2} aria-label="breadcrumb">
  <Link color="inherit" href="/">
    Главная
  </Link>
  <Link color="inherit" href="/catalog">
    Каталог
  </Link>
  <Link color="inherit" href="/electronics">
    Электроника
  </Link>
  <Typography color="text.primary">Смартфон</Typography>
</Breadcrumbs>

При превышении maxItems будет отображён промежуточный элемент с многоточием.

Адаптивность и мобильные устройства

Компонент поддерживает адаптивность благодаря MUI Typography и Link. Для мобильных устройств можно уменьшать шрифт и пробелы через sx:

<Breadcrumbs
  aria-label="breadcrumb"
  sx={{
    fontSize: { xs: '0.75rem', sm: '0.875rem', md: '1rem' },
    gap: { xs: 0.5, sm: 1, md: 1.5 }
  }}
>
  <Link color="inherit" href="/">Главная</Link>
  <Link color="inherit" href="/catalog">Каталог</Link>
  <Typography color="text.primary">Продукт</Typography>
</Breadcrumbs>

Важные рекомендации по использованию

  • Использовать Typography для текущей страницы, чтобы она не была интерактивной.
  • Добавлять aria-label="breadcrumb" для доступности.
  • Применять sx или styled для кастомизации внешнего вида вместо прямого изменения CSS классов.
  • Динамически генерировать Breadcrumbs из маршрутов или структуры данных приложения для упрощения поддержки.

Breadcrumbs в MUI обеспечивает удобное и гибкое отображение навигационных цепочек с поддержкой кастомизации, доступности и интеграции с маршрутизацией.

Оглавление