> ## 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.

# Firimituri de navigare

> Afișează poziția unei pagini cu o cale de linkuri către paginile părinte.

## Prezentare generală

`Breadcrumb` redă o cale de navigare ordonată. Include separatoare decorative, stiluri de focalizare pentru linkuri și trunchierea etichetei elementului final. Elementele păstrează comportamentul nativ al ancorelor și acceptă rutare personalizată prin `render`. Firul de navigare folosește în mod consecvent o grosime medie a fontului, inclusiv în anteturile cu o grosime diferită.

**Light**

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

**Dark**

[Exemplu 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)

## Utilizare

Transmite elementele în ordinea de la strămoș la cel curent. Reperul de navigare are implicit numele accesibil `Breadcrumb`; folosește `aria-label` pentru a-l localiza sau pentru a diferenția mai multe căi. Elementul final folosește implicit `aria-current="page"`, indiferent dacă are o destinație sau afișează text simplu.

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

Elementele cu `href` folosesc ancore native. Elementele fără destinație folosesc implicit text. Separatorii `/` sunt decorativi, ascunși tehnologiilor de asistență și nu fac parte din numele accesibile ale linkurilor. Linkurile urmează comportamentul normal al browserului pentru Tab și Enter, inclusiv clicurile cu taste modificatoare și deschiderea într-o filă nouă.

## Proprietăți native ale elementului

Fiecare element acceptă atribute native ale ancorei, gestionari de evenimente, `className`, `style` și `ref`. De exemplu, transmiteți `target` și `rel` pentru o filă nouă, `download` pentru un fișier sau `referrerPolicy` pentru a controla cererea. Referința elementului ajunge la elementul DOM redat.

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

## Pagina curentă

O valoare explicită `aria-current` pe un element are prioritate față de poziția sa. Utilizați `aria-current="page"` pe un alt element și `aria-current={false}` pe elementul final atunci când pagina curentă se află mai devreme în traseu. Alte valori native pentru elementul curent, precum `step`, sunt de asemenea păstrate. Asigurați-vă că numai elementul intenționat este curent.

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

## Linkuri de router

Folosește proprietatea `render` a unui element pentru a furniza componenta de link a routerului, alături de `href`. Transmiteți direct către componenta respectivă destinații, stări și opțiuni de istoric specifice routerului. `render` acceptă fie un element, fie o funcție care primește proprietățile furnizate, inclusiv atributele native ale ancorei și referința sa.

Linkul redat trebuie să transmită mai departe props și ref furnizate către elementul său ancoră. Păstrați comportamentul nativ al linkurilor atunci când gestionați navigarea, inclusiv clicurile cu taste modificatoare și filele noi. Consultă [componente personalizate](https://docs.twenty.com/ro/ui/primitives/overview#custom-components) pentru cerințele de compunere.

Aplicația alege destinațiile și decide când să afișeze o acțiune mobilă de întoarcere. `Breadcrumb` nu deduce rute și nu restrânge strămoșii într-un meniu.

## Etichete lungi

Elementul final se micșorează și este trunchiat cu puncte de suspensie atunci când containerul are spațiu limitat. Elementele strămoș își păstrează lățimea. Etichetele de tip șir simplu devin automat tooltipul nativ al browserului. Folosește `title` pentru a înlocui acel text sau pentru a oferi un tooltip pentru conținut bogat. Setați `title=""` pentru a suprima indicația automată.

**Light**

[Breadcrumb cu o etichetă lungă pentru pagina curentă (light)](https://storybook.twenty.com/iframe.html?id=primitives-navigation-breadcrumb--truncation\&viewMode=story\&globals=colorScheme:light)

**Dark**

[Breadcrumb cu o etichetă lungă pentru pagina curentă (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)

## Conținut bogat

`children` unui element poate include text și conținut vizual de suport. Păstrează eticheta lizibilă și evită imbricarea controalelor interactive într-un link.

**Light**

[Breadcrumb cu conținut de suport (light)](https://storybook.twenty.com/iframe.html?id=primitives-navigation-breadcrumb--rich-content\&viewMode=story\&globals=colorScheme:light)

**Dark**

[Breadcrumb cu conținut de suport (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)

## Direcția textului

Calea urmează direcția textului din jur. Setează `dir="rtl"` pe `Breadcrumb` sau pe un strămoș pentru conținut de la dreapta la stânga. Când alte controale necesită un comportament corespunzător al tastaturii sau al indicatorului, în funcție de direcție, setați și [DirectionProvider](https://docs.twenty.com/ro/ui/primitives/layout/direction-provider.md) la aceeași direcție.

**Light**

[Breadcrumb în conținut de la dreapta la stânga (light)](https://storybook.twenty.com/iframe.html?id=primitives-navigation-breadcrumb--rtl\&viewMode=story\&globals=colorScheme:light)

**Dark**

[Breadcrumb în conținut de la dreapta la stânga (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)

## Personalizarea rădăcinii

Atributele native de navigare, inclusiv numele accesibile, `className`, `style` și gestionarii de evenimente, ajung la reperul rădăcină. Referința rădăcinii ajunge la elementul său `nav`. Funcția `render` a rădăcinii acceptă, de asemenea, un element sau o funcție; păstrați reperul de navigare și transmiteți mai departe proprietățile furnizate și referința sa.

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

## Proprietăți

**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.