Gravity UI – UIKit – Breadcrumbs

import {Breadcrumbs} from '@gravity-ui/uikit';

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

Пример

Region
Country
City
District
Street

<Breadcrumbs>
    <Breadcrumbs.Item>Region</Breadcrumbs.Item>
    <Breadcrumbs.Item>Country</Breadcrumbs.Item>
    <Breadcrumbs.Item>City</Breadcrumbs.Item>
    <Breadcrumbs.Item>District</Breadcrumbs.Item>
    <Breadcrumbs.Item>Street</Breadcrumbs.Item>
</Breadcrumbs>

События

Используйте свойство onAction как обратный вызов для обработки событий клика по элементам.

Region
Country
City
District
Street

<Breadcrumbs onAction={(id) => alert(id)}>
    <Breadcrumbs.Item key={1}>Region</Breadcrumbs.Item>
    <Breadcrumbs.Item key={2}>Country</Breadcrumbs.Item>
    <Breadcrumbs.Item key={3}>City</Breadcrumbs.Item>
    <Breadcrumbs.Item key={4}>District</Breadcrumbs.Item>
    <Breadcrumbs.Item key={5}>Street</Breadcrumbs.Item>
</Breadcrumbs>

Ссылки

В компоненте Breadcrumbs клик по элементу обычно вызывает onAction. Однако вы также можете использовать его в качестве ссылки на другую страницу или сайт. Для этого добавьте свойство href в компонент <Breadcrumbs.Item>:

<Breadcrumbs>
    <Breadcrumbs.Item href="/">Home</Breadcrumbs.Item>
    <Breadcrumbs.Item href="/components">Components</Breadcrumbs.Item>
    <Breadcrumbs.Item href="/components/uikit/breadcrumbs">Breadcrumbs</Breadcrumbs.Item>
</Breadcrumbs>

Корневой контекст

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

Home
Trendy
March 2020 Assets
Winter
Holiday

<Box overflow="hidden" width={200}>
    <Breadcrumbs showRoot>
        <Breadcrumbs.Item key="home">Home</Breadcrumbs.Item>
        <Breadcrumbs.Item key="trendy">Trendy</Breadcrumbs.Item>
        <Breadcrumbs.Item key="2020 assets">March 2020 Assets</Breadcrumbs.Item>
        <Breadcrumbs.Item key="winter">Winter</Breadcrumbs.Item>
        <Breadcrumbs.Item key="holiday">Holiday</Breadcrumbs.Item>
    </Breadcrumbs>
</Box>

Разделитель

Region
Country
City
District
Street

<Breadcrumbs separator=">">
    <Breadcrumbs.Item>Region</Breadcrumbs.Item>
    <Breadcrumbs.Item>Country</Breadcrumbs.Item>
    <Breadcrumbs.Item>City</Breadcrumbs.Item>
    <Breadcrumbs.Item>District</Breadcrumbs.Item>
    <Breadcrumbs.Item>Street</Breadcrumbs.Item>
</Breadcrumbs>

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

uikit
components
Breadcrumbs

<Breadcrumbs>
  <Breadcrumbs.Item>
    <Flex alignItems="center" gap={1}>
      <House /> uikit
    </Flex>
  </Breadcrumbs.Item>
  <Breadcrumbs.Item>
    <Flex alignItems="center" gap={1}>
      <Flame /> components
    </Flex>
  </Breadcrumbs.Item>
  <Breadcrumbs.Item>
    <Flex alignItems="center" gap={1}>
      <Rocket style={{minWidth: 16}} />
      <Text ellipsis variant="inherit">
        Breadcrumbs
      </Text>
    </Flex>
  </Breadcrumbs.Item>
</Breadcrumbs>

Интеграция с роутерами

Области навигации

Когда хлебные крошки используются в качестве основного навигационного элемента на странице, их можно поместить в область навигации. Такие области помогают пользователям вспомогательных технологий быстро находить основные разделы страницы. Для создания области навигации поместите хлебные крошки внутрь элемента <nav> с атрибутом aria-label:

<nav aria-label="Breadcrumbs">
  <Breadcrumbs>
      <Breadcrumbs.Item href="/">Home</Breadcrumbs.Item>
      <Breadcrumbs.Item href="/components">Components</Breadcrumbs.Item>
      <Breadcrumbs.Item href="/components/uikit/breadcrumbs">Breadcrumbs</Breadcrumbs.Item>
  </Breadcrumbs>
</nav>

<Breadcrumbs>
    <Breadcrumbs.Item href="#Region">Region</Breadcrumbs.Item>
    <Breadcrumbs.Item href="#Country" disabled>
        Country
    </Breadcrumbs.Item>
    <Breadcrumbs.Item href="#City">City</Breadcrumbs.Item>
    <Breadcrumbs.Item href="#District">District</Breadcrumbs.Item>
    <Breadcrumbs.Item href="#Street" disabled>
        Street
    </Breadcrumbs.Item>
</Breadcrumbs>

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

Region
Country
City
District
Street

<Breadcrumbs endContent={<div style={{paddingInlineStart: 4}}><Button>Push</Button></div>}>
    <Breadcrumbs.Item>Region</Breadcrumbs.Item>
    <Breadcrumbs.Item>Country</Breadcrumbs.Item>
    <Breadcrumbs.Item>City</Breadcrumbs.Item>
    <Breadcrumbs.Item>District</Breadcrumbs.Item>
    <Breadcrumbs.Item>Street</Breadcrumbs.Item>
</Breadcrumbs>

Свойства

Имя	Описание	Тип	Значение по умолчанию
children	Элементы хлебных крошек.	`React.ReactElement<BreadcrumbsItemProps>`
disabled	Определяет, отключен ли компонент `Breadcrumbs`.	`boolean`
showRoot	Включает или отключает постоянное отображение корневого элемента при свернутом состоянии его дочерних элементов.	`boolean`
popupPlacement	Расположение всплывающего окна для свернутых элементов.	`PopupPlacement`
popupStyle	Стиль всплывающего окна для свернутых элементов.	`"staircase"`
qa	HTML-атрибут `data-qa`, используется для тестирования.	`string`
separator	Пользовательский разделитель элементов.	`React.ReactNode`	"/"
action	Обработчик события `click`.	`(id: Key) => void`
id	Уникальный идентификатор элемента.	`string`
className	Имя CSS-класса элемента.	`string`
style	Задает инлайн-стиль для элемента.	`CSSProperties`
aria-label	Определяет строковое значение, используемое в качестве метки для текущего элемента.	`string`
aria-labelledby	Определяет элементы, используемые в качестве метки для текущего элемента.	`string`
aria-describedby	Определяет элементы, описывающие объект.	`string`
endContent	Пользовательский контент после последней крошки.	`React.ReactNode`

BreadcrumbsItemProps

Имя	Описание	Тип
children	Содержимое хлебных крошек.	`string`
title	Строковое представление содержимого элемента.	`string`
aria-label	Метка доступности элемента.	`string`
href	URL-адрес гиперссылки.	`string`
target	Целевое окно для ссылки.	`React.HTMLAttributeAnchorTarget`
rel	Определяет отношение между связанным ресурсом и текущей страницей.	`string`
disabled	Определяет можно ли взаимодействовать с элементом.	`boolean`

Breadcrumbs

§Пример

§События

§Ссылки

§Корневой контекст

§Разделитель

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

§Интеграция с роутерами

§Области навигации

§Неактивные элементы

§Пользовательский контент после последней крошки

§Свойства

§BreadcrumbsItemProps