> ## Documentation Index
> Fetch the complete documentation index at: https://docs.twenty.com/llms.txt
> Use this file to discover all available pages before exploring further.

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

> Показывает расположение страницы с помощью цепочки ссылок на родительские страницы.

## Обзор

`Breadcrumb` отображает упорядоченную навигационную цепочку. Включает декоративные разделители, стили фокуса ссылок и усечение метки последнего элемента. Элементы сохраняют нативное поведение якорей и поддерживают пользовательскую маршрутизацию через `render`. Навигационная цепочка последовательно использует среднюю насыщенность шрифта, в том числе внутри заголовков с другой насыщенностью.

**Light**

[Пример Breadcrumb (light)](https://storybook.twenty.com/iframe.html?id=primitives-navigation-breadcrumb--display\&viewMode=story\&globals=colorScheme:light)

**Dark**

[Пример Breadcrumb (dark)](https://storybook.twenty.com/iframe.html?id=primitives-navigation-breadcrumb--display\&viewMode=story\&globals=colorScheme:dark)

[Open in Storybook](https://storybook.twenty.com/?path=/story/primitives-navigation-breadcrumb--display)

## Использование

Передавайте элементы в порядке от родительского к текущему. Для навигационного ориентира по умолчанию используется доступное имя `Breadcrumb`; используйте `aria-label`, чтобы локализовать его или различать несколько цепочек. Для последнего элемента по умолчанию используется `aria-current="page"` независимо от того, имеет ли он назначение или отображает обычный текст.

```tsx theme={null}
import { Breadcrumb } from 'twenty-ui/primitives/navigation';

export const CompanyBreadcrumb = () => (
  <Breadcrumb
    aria-label="Breadcrumb"
    links={[
      { children: 'Home', href: '/' },
      { children: 'Companies', href: '/companies' },
      { children: 'Acme' },
    ]}
  />
);
```

Элементы с `href` используют нативные якоря. Элементы без назначения по умолчанию отображаются как текст. Разделители `/` являются декоративными, скрыты от вспомогательных технологий и не входят в доступные имена ссылок. Ссылки следуют обычному поведению браузера при нажатии Tab и Enter, включая клики с модификаторами и открытие в новой вкладке.

## Нативные свойства элемента

Каждый элемент поддерживает нативные атрибуты якоря, обработчики событий, `className`, `style` и `ref`. Например, передайте `target` и `rel` для новой вкладки, `download` для файла или `referrerPolicy` для управления запросом. Ref элемента указывает на отрисованный DOM-элемент.

```tsx theme={null}
import { Breadcrumb } from 'twenty-ui/primitives/navigation';

export const ReferenceBreadcrumb = () => (
  <Breadcrumb
    aria-label="Reference location"
    links={[
      {
        children: 'Documentation',
        href: 'https://docs.twenty.com',
        target: '_blank',
        rel: 'noopener noreferrer',
        referrerPolicy: 'no-referrer',
      },
      { children: 'Companies' },
    ]}
  />
);
```

## Текущая страница

Явное значение `aria-current` для элемента имеет приоритет над его позицией. Используйте `aria-current="page"` для другого элемента и `aria-current={false}` для последнего элемента, когда текущая страница находится раньше в цепочке. Другие нативные значения текущего элемента, такие как `step`, также сохраняются. Убедитесь, что текущим является только нужный элемент.

```tsx theme={null}
import { Breadcrumb } from 'twenty-ui/primitives/navigation';

export const CompanyContextBreadcrumb = () => (
  <Breadcrumb
    links={[
      { children: 'Home', href: '/' },
      {
        children: 'Companies',
        href: '/companies',
        'aria-current': 'page',
      },
      { children: 'Acme', 'aria-current': false },
    ]}
  />
);
```

## Ссылки маршрутизатора

Используйте свойство `render` элемента, чтобы передать компонент ссылки вашего маршрутизатора вместе с `href`. Передавайте назначения, состояние и параметры истории, специфичные для маршрутизатора, непосредственно этому компоненту. `render` принимает элемент или функцию, получающую переданные свойства, включая нативные атрибуты якоря и его ref.

Отрисованная ссылка должна передавать предоставленные свойства и ref своему якорному элементу. Сохраняйте нативное поведение ссылок при обработке навигации, включая клики с модификаторами и новые вкладки. Требования к композиции см. в разделе [пользовательские компоненты](https://docs.twenty.com/ru/ui/primitives/overview#custom-components).

Приложение выбирает назначения и определяет, когда показывать мобильное действие возврата. `Breadcrumb` не определяет маршруты и не сворачивает родительские элементы в меню.

## Длинные метки

Последний элемент сжимается и обрезается с многоточием, когда в контейнере ограничено пространство. Родительские элементы сохраняют свою ширину. Простые строковые метки автоматически становятся встроенной подсказкой браузера. Используйте `title`, чтобы переопределить этот текст или предоставить подсказку для расширенного содержимого. Установите `title=""`, чтобы отключить автоматическую всплывающую подсказку.

**Light**

[Breadcrumb с длинной меткой текущей страницы (light)](https://storybook.twenty.com/iframe.html?id=primitives-navigation-breadcrumb--truncation\&viewMode=story\&globals=colorScheme:light)

**Dark**

[Breadcrumb с длинной меткой текущей страницы (dark)](https://storybook.twenty.com/iframe.html?id=primitives-navigation-breadcrumb--truncation\&viewMode=story\&globals=colorScheme:dark)

[Open in Storybook](https://storybook.twenty.com/?path=/story/primitives-navigation-breadcrumb--truncation)

## Расширенное содержимое

`children` элемента может включать текст и вспомогательное визуальное содержимое. Сохраняйте метку читаемой и не вкладывайте интерактивные элементы управления внутрь ссылки.

**Light**

[Breadcrumb со вспомогательным содержимым (light)](https://storybook.twenty.com/iframe.html?id=primitives-navigation-breadcrumb--rich-content\&viewMode=story\&globals=colorScheme:light)

**Dark**

[Breadcrumb со вспомогательным содержимым (dark)](https://storybook.twenty.com/iframe.html?id=primitives-navigation-breadcrumb--rich-content\&viewMode=story\&globals=colorScheme:dark)

[Open in Storybook](https://storybook.twenty.com/?path=/story/primitives-navigation-breadcrumb--rich-content)

## Направление текста

Цепочка следует направлению окружающего текста. Установите `dir="rtl"` для `Breadcrumb` или родительского элемента для содержимого справа налево. Если другим элементам управления требуется соответствующее направленное поведение клавиатуры или указателя, также задайте для [DirectionProvider](https://docs.twenty.com/ru/ui/primitives/layout/direction-provider.md) то же направление.

**Light**

[Breadcrumb в содержимом справа налево (light)](https://storybook.twenty.com/iframe.html?id=primitives-navigation-breadcrumb--rtl\&viewMode=story\&globals=colorScheme:light)

**Dark**

[Breadcrumb в содержимом справа налево (dark)](https://storybook.twenty.com/iframe.html?id=primitives-navigation-breadcrumb--rtl\&viewMode=story\&globals=colorScheme:dark)

[Open in Storybook](https://storybook.twenty.com/?path=/story/primitives-navigation-breadcrumb--rtl)

## Настройка корневого элемента

Нативные атрибуты навигации, включая доступные имена, `className`, `style` и обработчики событий, передаются корневому ориентиру. Корневой ref указывает на его элемент `nav`. Корневой `render` также принимает элемент или функцию; сохраните ориентир навигации и передайте его предоставленные свойства и ref.

```tsx theme={null}
import { useRef } from 'react';
import { Breadcrumb } from 'twenty-ui/primitives/navigation';

export const HeaderBreadcrumb = () => {
  const navigationRef = useRef<HTMLElement>(null);
  const companiesRef = useRef<HTMLAnchorElement>(null);

  return (
    <Breadcrumb
      aria-label="Company location"
      ref={navigationRef}
      render={<nav data-location="header" />}
      links={[
        {
          children: 'Companies',
          href: '/companies',
          ref: companiesRef,
          render: (props) => (
            <a {...props} data-route={props.href}>
              {props.children}
            </a>
          ),
        },
        { children: 'Acme' },
      ]}
    />
  );
};
```

## Свойства

**aria-label** `string`

Accessible navigation name. Defaults to Breadcrumb; supply a localized name or use aria-labelledby.

**className** `string`

Class merged onto the root navigation element.

**links** `BreadcrumbItem[]` *required*

Ordered trail items with native anchor attributes, event handlers, ref, children and element or callback render composition. Items with href default to anchors; other items default to text. The final item defaults to aria-current="page". An explicit aria-current value is preserved, including false.

**ref** `Ref\<HTMLElement\>`

Ref to the root nav, or the DOM element supplied through render.

**render** `ReactElement\<unknown, string | JSXElementConstructor\<any\>\> | ComponentRenderFn\<HTMLProps, \{\}\>`

Caller-supplied root element or renderer. Preserve the navigation landmark and forward the supplied props and ref.

**style** `CSSProperties`

Inline styles applied to the root navigation element.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.