Breadcrumb

Breadcrumb — это компонент, позволяющий создавать навигационные цепочки, которые показывают пользователю путь к текущей странице в приложении. В Chakra UI он реализован с высокой степенью кастомизации, поддерживает адаптивность и интеграцию с React Router или Next.js Link.

Основные компоненты Breadcrumb

Chakra UI разбивает Breadcrumb на несколько ключевых частей:

  1. Breadcrumb — контейнер для всей навигационной цепочки.
  2. BreadcrumbItem — отдельный элемент цепочки, который может содержать ссылку или текст.
  3. BreadcrumbLink — интерактивная ссылка внутри BreadcrumbItem.
  4. BreadcrumbSeparator — разделитель между элементами, по умолчанию отображается как /.

Простейшая структура выглядит так:

import { Breadcrumb, BreadcrumbItem, BreadcrumbLink, BreadcrumbSeparator } from "@chakra-ui/react";

<Breadcrumb>
  <BreadcrumbItem>
    <BreadcrumbLink href="/">Главная</BreadcrumbLink>
  </BreadcrumbItem>

  <BreadcrumbItem>
    <BreadcrumbLink href="/blog">Блог</BreadcrumbLink>
  </BreadcrumbItem>

  <BreadcrumbItem isCurrentPage>
    <BreadcrumbLink href="/blog/react-chakra">React & Chakra UI</BreadcrumbLink>
  </BreadcrumbItem>
</Breadcrumb>

Ключевые моменты:

  • Атрибут isCurrentPage указывает, что элемент представляет текущую страницу. Он автоматически делает текст не кликабельным и добавляет семантический aria-current="page".
  • BreadcrumbSeparator можно кастомизировать через свойство separator.

Кастомизация разделителя

Разделитель по умолчанию — /. Его можно заменить на любой JSX элемент:

<Breadcrumb separator=">">
  <BreadcrumbItem>
    <BreadcrumbLink href="/">Главная</BreadcrumbLink>
  </BreadcrumbItem>
  <BreadcrumbItem>
    <BreadcrumbLink href="/about">О нас</BreadcrumbLink>
  </BreadcrumbItem>
</Breadcrumb>

Можно использовать и иконки из Chakra UI или внешние SVG:

import { ChevronRightIcon } from "@chakra-ui/icons";

<Breadcrumb separator={<ChevronRightIcon color="gray.500" />}>
  <BreadcrumbItem>
    <BreadcrumbLink href="/">Главная</BreadcrumbLink>
  </BreadcrumbItem>
  <BreadcrumbItem>
    <BreadcrumbLink href="/services">Сервисы</BreadcrumbLink>
  </BreadcrumbItem>
</Breadcrumb>

Горизонтальное и вертикальное отображение

По умолчанию Breadcrumb располагается горизонтально. Для вертикальной навигации можно использовать Stack или Flex для управления ориентацией:

import { VStack } from "@chakra-ui/react";

<VStack align="start">
  <Breadcrumb>
    <BreadcrumbItem>
      <BreadcrumbLink href="/">Главная</BreadcrumbLink>
    </BreadcrumbItem>
    <BreadcrumbItem>
      <BreadcrumbLink href="/catalog">Каталог</BreadcrumbLink>
    </BreadcrumbItem>
  </Breadcrumb>
</VStack>

Стилизация элементов

Chakra UI позволяет применять стили на уровне Breadcrumb, BreadcrumbItem и BreadcrumbLink.

<Breadcrumb spacing="8px" separator="•" fontSize="lg" color="teal.600">
  <BreadcrumbItem>
    <BreadcrumbLink href="/">Главная</BreadcrumbLink>
  </BreadcrumbItem>
  <BreadcrumbItem>
    <BreadcrumbLink href="/portfolio">Портфолио</BreadcrumbLink>
  </BreadcrumbItem>
</Breadcrumb>

Возможные свойства:

  • spacing — расстояние между элементами.
  • separator — разделитель.
  • fontSize, color, fontWeight — стили текста.
  • isCurrentPage — делает элемент неактивным и семантически текущей страницей.

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

Chakra UI поддерживает использование компонентов Link вместо обычного a.

React Router:

import { Link as RouterLink } from "react-router-dom";

<Breadcrumb>
  <BreadcrumbItem>
    <BreadcrumbLink as={RouterLink} to="/">Главная</BreadcrumbLink>
  </BreadcrumbItem>
  <BreadcrumbItem>
    <BreadcrumbLink as={RouterLink} to="/profile">Профиль</BreadcrumbLink>
  </BreadcrumbItem>
</Breadcrumb>

Next.js:

import NextLink from "next/link";

<Breadcrumb>
  <BreadcrumbItem>
    <BreadcrumbLink as={NextLink} href="/">Главная</BreadcrumbLink>
  </BreadcrumbItem>
  <BreadcrumbItem>
    <BreadcrumbLink as={NextLink} href="/blog">Блог</BreadcrumbLink>
  </BreadcrumbItem>
</Breadcrumb>

Адаптивность

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

<Breadcrumb>
  <BreadcrumbItem>
    <BreadcrumbLink isTruncated href="/very/long/path">Очень длинный путь</BreadcrumbLink>
  </BreadcrumbItem>
</Breadcrumb>

События и интерактивность

BreadcrumbLink поддерживает все стандартные события React, такие как onClick, onMouseEnter, onFocus. Это позволяет добавлять трекинг кликов или кастомное поведение при переходе по ссылке:

<BreadcrumbItem>
  <BreadcrumbLink
    href="/dashboard"
    onCl ick={() => console.log("Переход на Dashboard")}
  >
    Dashboard
  </BreadcrumbLink>
</BreadcrumbItem>

Breadcrumb в Chakra UI сочетает семантику, гибкость и простоту использования. Он легко интегрируется с маршрутизацией, поддерживает кастомные разделители, стили и адаптивное поведение, что делает его мощным инструментом для построения навигационных цепочек в React-приложениях.

Оглавление