Breadcrumb

Panoramica

Breadcrumb visualizza un percorso di navigazione ordinato. Include separatori decorativi, stili di focus dei link e il troncamento dell’etichetta dell’elemento finale. Gli elementi mantengono il comportamento nativo delle ancore e supportano il routing personalizzato tramite render. Il breadcrumb utilizza in modo coerente un peso del carattere medio, anche all’interno di intestazioni con un peso diverso.

Utilizzo

Passa gli elementi nell’ordine dall’antenato a quello corrente. Il landmark di navigazione usa per impostazione predefinita il nome accessibile Breadcrumb; usa aria-label per localizzarlo o distinguere più percorsi. Per impostazione predefinita, l’elemento finale usa aria-current="page", indipendentemente dal fatto che abbia una destinazione o visualizzi testo semplice.

import { Breadcrumb } from 'twenty-ui/primitives/navigation';

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

Gli elementi con href usano ancore native. Gli elementi senza una destinazione sono per impostazione predefinita testo. I separatori / sono decorativi, nascosti alle tecnologie assistive e al di fuori dei nomi accessibili dei link. I link seguono il normale comportamento del browser per Tab e Invio, inclusi i clic con tasti modificatori e l’apertura in una nuova scheda.

Props nativi degli elementi

Ogni elemento accetta attributi anchor nativi, gestori di eventi, className, style e ref. Ad esempio, passa target e rel per una nuova scheda, download per un file oppure referrerPolicy per controllare la richiesta. Il ref dell’elemento raggiunge l’elemento DOM renderizzato.

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

Pagina corrente

Un valore aria-current esplicito su un elemento ha la precedenza sulla sua posizione. Usa aria-current="page" su un altro elemento e aria-current={false} sull’elemento finale quando la pagina corrente si trova prima nel percorso. Anche altri valori nativi per l’elemento corrente, come step, vengono mantenuti. Assicurati che sia corrente solo l’elemento previsto.

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

Link del router

Usa la prop render di un elemento per fornire il componente link del router, insieme a href. Passa direttamente a quel componente destinazioni, stato e opzioni della cronologia specifici del router. render accetta un elemento o una funzione che riceve le props fornite, inclusi gli attributi anchor nativi e il relativo ref. Il link visualizzato deve inoltrare le prop e il ref forniti al relativo anchor. Mantieni il comportamento nativo dei link durante la gestione della navigazione, inclusi i clic con tasti modificatori e le nuove schede. Consulta componenti personalizzati per i requisiti di composizione. L’applicazione sceglie le destinazioni e decide quando mostrare un’azione per tornare indietro su dispositivi mobili. Breadcrumb non deduce le route né comprime gli antenati in un menu.

Etichette lunghe

L’elemento finale si riduce e viene troncato con un’ellissi quando il contenitore ha spazio limitato. Gli elementi antenati mantengono la propria larghezza. Le etichette stringa semplici diventano automaticamente il tooltip nativo del browser. Usa title per sovrascrivere quel testo o fornire un tooltip per contenuti ricchi. Imposta title="" per sopprimere il tooltip automatico.

Contenuto ricco

I children di un elemento possono includere testo e contenuti visivi di supporto. Mantieni l’etichetta leggibile ed evita di annidare controlli interattivi all’interno di un link.

Direzione del testo

Il percorso segue la direzione del testo circostante. Imposta dir="rtl" su Breadcrumb o su un antenato per i contenuti da destra a sinistra. Quando altri controlli richiedono un comportamento direzionale coerente per tastiera o puntatore, imposta anche DirectionProvider sulla stessa direzione.

Personalizzazione dell’elemento radice

Gli attributi di navigazione nativi, inclusi i nomi accessibili, className, style e i gestori di eventi, raggiungono il landmark radice. Il ref dell’elemento radice raggiunge il relativo elemento nav. Anche render dell’elemento radice accetta un elemento o una funzione; mantieni il landmark di navigazione e inoltra le props fornite e il relativo 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' },
      ]}
    />
  );
};

Props

string

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

string

Class merged onto the root navigation element.

BreadcrumbItem[]

obbligatorio

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.

Sviluppatori

App

API

Auto-ospitazione

Contribuire

Libreria UI

Panoramica

Utilizzo

Props nativi degli elementi

Pagina corrente

Link del router

Etichette lunghe

Contenuto ricco

Direzione del testo

Personalizzazione dell’elemento radice

Props

​Panoramica

​Utilizzo

​Props nativi degli elementi

​Pagina corrente

​Link del router

​Etichette lunghe

​Contenuto ricco

​Direzione del testo

​Personalizzazione dell’elemento radice

​Props

Panoramica

Utilizzo

Props nativi degli elementi

Pagina corrente

Link del router

Etichette lunghe

Contenuto ricco

Direzione del testo

Personalizzazione dell’elemento radice

Props