Breadcrumb

Breadcrumb — это компонент навигации, который позволяет отображать путь к текущему положению пользователя в приложении. Он используется для улучшения ориентации на сайте или в веб-приложении, показывая иерархию страниц и обеспечивая быстрый переход на предыдущие уровни. В Ant Design компонент реализован с высокой гибкостью и поддержкой кастомизации.

Основы использования

Импортировать компонент можно из пакета antd:

import { Breadcrumb } from 'antd';

Базовая структура Breadcrumb включает контейнер <Breadcrumb> и дочерние элементы <Breadcrumb.Item>:

<Breadcrumb>
  <Breadcrumb.Item>Главная</Breadcrumb.Item>
  <Breadcrumb.Item>Категории</Breadcrumb.Item>
  <Breadcrumb.Item>Электроника</Breadcrumb.Item>
</Breadcrumb>

В этом примере создается простой хлебный путь с тремя уровнями. По умолчанию разделитель между элементами — символ /.

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

Разделитель между элементами можно изменить с помощью пропса separator:

<Breadcrumb separator=">">
  <Breadcrumb.Item>Главная</Breadcrumb.Item>
  <Breadcrumb.Item>Категории</Breadcrumb.Item>
  <Breadcrumb.Item>Электроника</Breadcrumb.Item>
</Breadcrumb>

Пропс separator может принимать как строку, так и JSX:

<Breadcrumb separator={<RightOutlined />}>
  <Breadcrumb.Item>Главная</Breadcrumb.Item>
  <Breadcrumb.Item>Категории</Breadcrumb.Item>
</Breadcrumb>

Для использования иконок необходимо импортировать соответствующие компоненты из @ant-design/icons.

Ссылки и навигация

Каждый элемент хлебных крошек может быть кликабельным. Для этого внутри <Breadcrumb.Item> используется компонент <a> или любой другой навигационный компонент (например, Link из react-router-dom):

<Breadcrumb>
  <Breadcrumb.Item>
    <a href="/">Главная</a>
  </Breadcrumb.Item>
  <Breadcrumb.Item>
    <a href="/categories">Категории</a>
  </Breadcrumb.Item>
  <Breadcrumb.Item>Электроника</Breadcrumb.Item>
</Breadcrumb>

Элементы, не обернутые в ссылку, отображаются как обычный текст, что удобно для текущей страницы.

Динамическое создание

Breadcrumb часто создается динамически на основе данных. Например, можно генерировать элементы из массива объектов:

const breadcrumbItems = [
  { title: 'Главная', path: '/' },
  { title: 'Категории', path: '/categories' },
  { title: 'Электроника', path: '/categories/electronics' }
];

<Breadcrumb>
  {breadcrumbItems.map(item => (
    <Breadcrumb.Item key={item.path}>
      {item.path ? <a href={item.path}>{item.title}</a> : item.title}
    </Breadcrumb.Item>
  ))}
</Breadcrumb>

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

Поддержка иконок

Компонент поддерживает использование иконок для визуального улучшения интерфейса. Например, можно добавить иконку домашней страницы:

import { HomeOutlined } from '@ant-design/icons';

<Breadcrumb>
  <Breadcrumb.Item>
    <HomeOutlined />
    <span>Главная</span>
  </Breadcrumb.Item>
  <Breadcrumb.Item>Категории</Breadcrumb.Item>
</Breadcrumb>

Важно размещать текст после иконки для корректного отображения и удобства чтения.

Кастомизация стиля

Ant Design позволяет изменять внешний вид Breadcrumb через CSS или встроенные пропсы. Основные возможности:

style — добавление inline-стилей.
className — применение кастомного класса для глобальной стилизации.
Изменение размера шрифта, цвета текста и разделителей.

Пример кастомного стиля:

<Breadcrumb style={{ fontSize: '16px', color: '#1890ff' }}>
  <Breadcrumb.Item>Главная</Breadcrumb.Item>
  <Breadcrumb.Item>Категории</Breadcrumb.Item>
</Breadcrumb>

Комбинирование с другими компонентами

Breadcrumb часто комбинируется с компонентами Layout и PageHeader для создания структурированных интерфейсов:

import { Layout, PageHeader } from 'antd';
const { Header, Content } = Layout;

<Layout>
  <Header>
    <PageHeader
      title="Электроника"
      breadcrumbRender={() => (
        <Breadcrumb>
          <Breadcrumb.Item>Главная</Breadcrumb.Item>
          <Breadcrumb.Item>Категории</Breadcrumb.Item>
          <Breadcrumb.Item>Электроника</Breadcrumb.Item>
        </Breadcrumb>
      )}
    />
  </Header>
  <Content>Содержимое страницы</Content>
</Layout>

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