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

# Migaja de pan

> Muestra la ubicación de una página con una ruta de enlaces de elementos antecesores.

## Resumen

`Breadcrumb` representa una ruta de navegación ordenada. Incluye separadores decorativos, estilos de foco de enlaces y truncamiento de la etiqueta del elemento final. Los elementos conservan el comportamiento nativo de los anclajes y admiten enrutamiento personalizado mediante `render`. La ruta de navegación usa sistemáticamente un grosor de fuente medio, incluso dentro de encabezados con un grosor diferente.

**Light**

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

**Dark**

[Ejemplo de 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)

## "Uso"

Pasa los elementos en orden de antecesor a actual. El punto de referencia de navegación usa de forma predeterminada el nombre accesible `Breadcrumb`; utiliza `aria-label` para localizarlo o distinguir varias rutas. El elemento final usa de forma predeterminada `aria-current="page"`, tanto si tiene un destino como si muestra texto sin formato.

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

Los elementos con `href` usan anclajes nativos. Los elementos sin destino se muestran como texto de forma predeterminada. Los separadores `/` son decorativos, están ocultos para la tecnología de asistencia y no forman parte de los nombres accesibles de los enlaces. Los enlaces siguen el comportamiento normal del navegador para Tab y Enter, incluidos los clics con modificadores y la apertura en una pestaña nueva.

## Props nativas del elemento

Cada elemento acepta atributos de anclaje nativos, controladores de eventos, `className`, `style` y `ref`. Por ejemplo, pasa `target` y `rel` para una pestaña nueva, `download` para un archivo o `referrerPolicy` para controlar la solicitud. El ref del elemento llega al elemento DOM renderizado.

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

## Página actual

Un valor explícito de `aria-current` en un elemento tiene prioridad sobre su posición. Usa `aria-current="page"` en otro elemento y `aria-current={false}` en el elemento final cuando la página actual esté antes en la ruta. También se conservan otros valores nativos de elemento actual, como `step`. Asegúrate de que solo el elemento previsto sea el actual.

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

## Enlaces de enrutador

Utiliza la prop `render` de un elemento para proporcionar el componente de enlace de tu enrutador, junto con `href`. Pasa destinos, estado y opciones de historial específicos del enrutador directamente a ese componente. `render` acepta un elemento o una función que recibe las props proporcionadas, incluidos los atributos de anclaje nativos y su ref.

El enlace representado debe reenviar las props y la ref proporcionadas a su ancla. Conserva el comportamiento nativo de los enlaces al gestionar la navegación, incluidos los clics con modificadores y las pestañas nuevas. Consulta los [componentes personalizados](https://docs.twenty.com/es/ui/primitives/overview#custom-components) para conocer los requisitos de composición.

La aplicación elige los destinos y decide cuándo mostrar una acción de retroceso móvil. `Breadcrumb` no infiere rutas ni contrae los elementos antecesores en un menú.

## Etiquetas largas

El elemento final se reduce y se trunca con puntos suspensivos cuando el contenedor tiene espacio limitado. Los elementos antecesores conservan su anchura. Las etiquetas de cadena sin formato se convierten automáticamente en la información sobre herramientas nativa del navegador. Utiliza `title` para reemplazar ese texto o proporcionar una información sobre herramientas para contenido enriquecido. Establece `title=""` para suprimir la descripción emergente automática.

**Light**

[Breadcrumb con una etiqueta larga de página actual (light)](https://storybook.twenty.com/iframe.html?id=primitives-navigation-breadcrumb--truncation\&viewMode=story\&globals=colorScheme:light)

**Dark**

[Breadcrumb con una etiqueta larga de página actual (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)

## Contenido enriquecido

Los `children` de un elemento pueden incluir texto y contenido visual complementario. Mantén la etiqueta legible y evita anidar controles interactivos dentro de un enlace.

**Light**

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

**Dark**

[Breadcrumb con contenido complementario (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)

## Dirección del texto

La ruta sigue la dirección del texto circundante. Establece `dir="rtl"` en `Breadcrumb` o en un elemento antecesor para contenido de derecha a izquierda. Cuando otros controles necesiten un comportamiento coincidente del teclado o del puntero según la dirección, configura también [DirectionProvider](https://docs.twenty.com/es/ui/primitives/layout/direction-provider.md) en la misma dirección.

**Light**

[Breadcrumb en contenido de derecha a izquierda (light)](https://storybook.twenty.com/iframe.html?id=primitives-navigation-breadcrumb--rtl\&viewMode=story\&globals=colorScheme:light)

**Dark**

[Breadcrumb en contenido de derecha a izquierda (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)

## Personalización de la raíz

Los atributos de navegación nativos, incluidos los nombres accesibles, `className`, `style` y los controladores de eventos, llegan al punto de referencia raíz. El ref de la raíz llega a su elemento `nav`. El `render` de la raíz también acepta un elemento o una función; conserva el punto de referencia de navegación y reenvía sus props proporcionadas y su 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' },
      ]}
    />
  );
};
```

## "Props"

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