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

Обзор

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

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

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

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-элемент.

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, также сохраняются. Убедитесь, что текущим является только нужный элемент.

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 своему якорному элементу. Сохраняйте нативное поведение ссылок при обработке навигации, включая клики с модификаторами и новые вкладки. Требования к композиции см. в разделе пользовательские компоненты. Приложение выбирает назначения и определяет, когда показывать мобильное действие возврата. Breadcrumb не определяет маршруты и не сворачивает родительские элементы в меню.

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

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

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

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

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

Цепочка следует направлению окружающего текста. Установите dir="rtl" для Breadcrumb или родительского элемента для содержимого справа налево. Если другим элементам управления требуется соответствующее направленное поведение клавиатуры или указателя, также задайте для DirectionProvider то же направление.

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

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

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' },
      ]}
    />
  );
};

Свойства

string

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

string

Class merged onto the root navigation element.

BreadcrumbItem[]

обязательно

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<HTMLElement>

Ref to the root nav, or the DOM element supplied through 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.

CSSProperties

Inline styles applied to the root navigation element.

Разработчики

Приложения

API

Самостоятельный хостинг

Внести вклад

Библиотека интерфейса

Обзор

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

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

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

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

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

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

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

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

Свойства

​Обзор

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

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

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

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

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

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

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

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

​Свойства

Обзор

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

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

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

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

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

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

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

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

Свойства