Ruta de navegación

Categoría: Navegación
Tokens: comp.breadcrumbs
Nivel: Base

Descripción general

Web: tanrei-breadcrumbs; schedule
SwiftUI: TanreiBreadcrumbs; radio_button_unchecked
Jetpack Compose: TanreiBreadcrumbs; radio_button_unchecked
Flutter: TanreiBreadcrumbs; radio_button_unchecked
React Native: Breadcrumbs; radio_button_unchecked

Generado a partir de docs/status/status.json, specs/breadcrumbs.spec.json

Una ruta de tres niveles

Una ruta muestra dónde está una página en la jerarquía, no el camino por el que una persona llegó a ella. Úsala donde hay páginas dentro de otras páginas, con tres o más niveles de profundidad.

Uso

En la web la ruta de navegación es un elemento que rodea tus propias anclas. Las anclas se quedan en el documento, así que son enlaces antes de que se ejecute ningún script, y las encuentran un rastreador, un enrutador que trabaja sobre las anclas de la página y el componente de enlace propio de un enrutador.

Un nivel con destino es un <a href>. Un nivel sin destino es un <span>: la página actual, o un nivel que no tiene página propia.

SwiftUI, Compose, Flutter y React Native están planificados: los nombres que figuran junto a cada plataforma al principio de esta página son los que les da la especificación, y todavía no se distribuye nada para ellos.

<link rel="stylesheet" href="@tanrei/web/tokens.css" />
<link rel="stylesheet" href="@tanrei/web/icons.css" />
<link rel="stylesheet" href="@tanrei/web/breadcrumbs.css" />

<tanrei-breadcrumbs label="Ruta de navegación" overflow-label="Mostrar niveles ocultos">
  <a href="/">Inicio</a>
  <a href="/components/">Componentes</a>
  <span aria-current="page">Botón</span>
</tanrei-breadcrumbs>

<!-- Un glifo antes de la primera etiqueta, o solo. El texto sigue siendo el nombre del nivel. -->
<tanrei-breadcrumbs label="Ruta de navegación" overflow-label="Mostrar niveles ocultos">
  <a href="/" data-icon="home" data-icon-only>Inicio</a>
  <a href="/components/">Componentes</a>
  <span aria-current="page">Botón</span>
</tanrei-breadcrumbs>

<script type="module">
  import '@tanrei/web';
</script>

import { Breadcrumbs } from '@tanrei/react';
import '@tanrei/web/breadcrumbs.css';
import { Link as RouterLink } from 'react-router-dom';

<Breadcrumbs label="Ruta de navegación" overflowLabel="Mostrar niveles ocultos">
  {/* El enlace de un enrutador renderiza su propia ancla y se hace cargo de la navegación a partir de su click. */}
  <RouterLink to="/">Inicio</RouterLink>
  <RouterLink to="/components/">Componentes</RouterLink>
  <span aria-current="page">Botón</span>
</Breadcrumbs>

Propiedad	En la web
`label`	el atributo `label`: el nombre de la región de referencia (landmark) de navegación
`overflow`	`overflow="collapse"` (el valor predeterminado) u `overflow="wrap"`
`overflowLabel`	`overflow-label`: el nombre del botón de desbordamiento
`underline`	`underline="always"`, `"hover"` o `"never"`. Sin él, la ruta sigue al sistema de diseño
un nivel	un hijo `<a href>`, o un hijo `<span>` para un nivel sin destino
el `label` de un nivel	su texto
`current`	`aria-current="page"` en el último hijo
`icon`	`data-icon="home"`
`iconOnly`	`data-icon-only`
`click`	el `click` de la propia ancla

Especificaciones

Un nivel sin página; la página actual como enlace; una ruta que termina en el nivel superior

InicioFundamentosTipografía

Inicio Componentes Botón

Inicio Componentes

El subrayado solo con el cursor encima, con el foco o durante la pulsación; y nunca

Inicio ComponentesRuta de navegación

Una ruta larga en una columna estrecha: plegada, y en varias líneas

Inicio Documentación Fundamentos Tokens de diseño Tokens de componenteCómo se deriva un contenedor deshabilitado

Un nivel que lleva a algún sitio está subrayado en el sistema predeterminado. Ahí es el subrayado, y no el color, lo que dice que un nivel es un enlace, como ocurre con un enlace dentro de una frase. Un nivel sin destino es texto secundario. La página actual tiene más peso, va en el color del texto y nunca está subrayada.
Cuándo se dibuja el subrayado es una elección. underline="hover" lo dibuja solo mientras un nivel tiene el cursor encima, tiene el foco del teclado o está pulsado. underline="never" no dibuja ninguno. Sin el atributo, la ruta sigue a comp.breadcrumbs.underline.visibility, que sigue la elección del sistema de diseño para todos los enlaces de texto. Elige hover o never solo donde el color de enlace se distingue del color del texto. Con colores forzados, la línea se dibuja siempre.
La página actual es texto. Un enlace a la página en la que ya está una persona no lleva a ningún sitio y añade una parada de tabulación a todas las páginas. Dale href solo donde las vistas de la página cambian bajo una misma dirección. Es entonces un enlace con el mismo aspecto. Donde el encabezado de la página está justo debajo de la ruta, puedes omitir la página actual.
Los separadores son del componente: chevron_right entre dos niveles contiguos. Nunca escribas un separador dentro de una etiqueta.
Una ruta larga pliega su parte central. Con collapse, la ruta se queda en una sola línea. Los niveles pasan detrás del botón de desbordamiento a partir del que sigue al primero, solo tantos como pide la anchura, y después el primero. El último nivel nunca se retira. Su etiqueta solo se corta cuando ni siquiera caben el botón y él solos.
El botón de desbordamiento abre un menú con los niveles retirados, en el orden de la ruta. Un nivel con destino también es un enlace ahí. Una fila del menú nunca está subrayada.
wrap conserva todos los niveles y deja que la ruta ocupe varias líneas. Una línea nunca empieza con un separador, y ninguna etiqueta se corta.
Se pliega según su propia anchura, no la de la ventana, y vuelve a decidir cuando cambian su anchura, una etiqueta o el tamaño del texto.
De derecha a izquierda, la ruta empieza por la derecha y los separadores apuntan a la izquierda. Un nombre escrito de izquierda a derecha conserva su propio orden.

Anatomía

Parte	Descripción
1 `root`	The navigation landmark and, in it, one ordered list of the levels, from the top of the hierarchy to the page. On one line by default.
2 `container`	The shape behind a level that is a link, and behind the overflow button. It has no fill at rest and takes no room in the layout: it is where hover, focus and press are drawn.
3 `label`	A level's text, in the trail's text style.
4 `underline`	The line under the label of a level that is a link, in the label's color. When it is drawn is a choice (BRC-30): at rest in the default system, where it is what says that a level leads somewhere. The current page and a level without a destination have none.
5 `icon` · opcional	A glyph of the system's icon set that the product names for a level (a house for the top), before the label or in its place. Decorative.
6 `separator`	The glyph chevron_right between two neighbouring levels, drawn by the trail. Decorative; mirrored in a right-to-left layout by the icon helper.
7 `overflow-button` · opcional	An icon-only button showing more_horiz that stands where levels were taken out of a trail too long for its width, and opens a menu of them.
8 `menu` · opcional	The menu of the levels that were taken out, in the trail's order: a Tanrei menu, opened from the overflow button.
9 `focus-ring`	The indicator shown for keyboard focus, around a link's or the overflow button's container.

Propiedades

Propiedad	Tipo	Valor predeterminado	Descripción
`label`	`string`	`""`	The accessible name of the landmark ("Breadcrumbs"), in the product's language. Tanrei ships no words of its own. It tells this landmark from the page's other navigation, so it is required.
`overflow`	`collapse` \| `wrap`	`"collapse"`	What a trail longer than its width does. collapse: it stays on one line and its middle levels go behind the overflow button, as many as the width asks for (BRC-9). wrap: every level stays in the trail, which runs over as many lines as it needs (BRC-15).
`overflowLabel`	`string`	`""`	The accessible name of the overflow button ("Show hidden levels"), in the product's language. Required while overflow is collapse; ignored while it is wrap.
`underline`	`auto` \| `always` \| `hover` \| `never`	`"auto"`	When the levels that are links are underlined. always: at rest and in every state. hover: while a level is hovered, focused from the keyboard or pressed, and not at rest. never: in no state. Auto takes comp.breadcrumbs.underline.visibility, the design system's answer (always in the default system). It applies to every level of the trail.

Elementos

Los tipos de elemento que el componente repite. Un fixture enumera sus elementos en orden; cada plataforma nombra cada tipo según su propio estilo.

`item`

One level of the hierarchy: a link to it, the page the person is on, or the name of a level that has no page.

Propiedad	Tipo	Valor predeterminado	Descripción
`label`	`string`	`""`	The level's name: the title of its page, as short as the product has it. It is the item's accessible name, drawn or not.
`href`	`string`	`""`	The destination: an address as the platform's links take one. With one the level is a link; without one it is text — the current page, or a level that has no page of its own (BRC-3).
`current`	`boolean`	`false`	The level is the page the person is on. Only the last item may be current. It is exposed as the current page and drawn heavier, without an underline; give it no href, so that it is text and not a link to where the person already is (BRC-4).
`icon`	`string`	`""`	The name of a glyph of the system's icon set, drawn before the label ("home" for the top of the hierarchy). Empty: no glyph.
`iconOnly`	`boolean`	`false`	Draws the glyph alone and keeps the label as the accessible name. Ignored while icon is empty.

Evento	Descripción
`click`	A level that is a link was activated by pointer, touch, Enter or assistive technology, in the trail or in the menu. It is emitted before the destination opens; a product that takes the navigation itself (a client-side router) cancels it (BRC-22).

Especificación	Web	SwiftUI	Jetpack Compose	Flutter	React Native
Elemento	`a`	`TanreiBreadcrumbsItem`	`TanreiBreadcrumbsItem`	`TanreiBreadcrumbsItem`	`BreadcrumbsItem`
`label` · Propiedad	`textContent`	`label`	`label`	`label`	`label`
`href` · Propiedad	`href`	`destination`	`href`	`href`	`href`
`current` · Propiedad	`aria-current`	`isCurrent`	`current`	`isCurrent`	`current`
`icon` · Propiedad	`data-icon`	`icon`	`icon`	`icon`	`icon`
`iconOnly` · Propiedad	`data-icon-only`	`iconOnly`	`iconOnly`	`iconOnly`	`iconOnly`
`click` · Evento	`click`	`action`	`onClick`	`onPressed`	`onPress`
Notas	The product's own child of the element, in the document: an `<a href>` for a level with a destination, a `<span>` for one without. The label is its text; `aria-current="page"` marks the current page; `data-icon="home"` names a glyph and `data-icon-only` hides the text from sight, not from the name.	A value: `TanreiBreadcrumbsItem("Components", destination: url, action:)`; `destination` is an optional `URL`. `action` runs before the address opens and returns whether the link should still open it.	A data class; `href` is nullable. `onClick` returns false to keep the address closed; otherwise `LocalUriHandler.current` opens it.	A value class; `href` is nullable. `onPressed` returns false to keep the address closed; otherwise the opener the app provides opens it.	An object of the `items` prop. `onPress` receives an event whose `preventDefault()` keeps the address closed; otherwise `Linking.openURL(href)`.

Estados

Comportamiento

Requisitos en formato EARS. Cada implementación de plataforma se prueba contra estos identificadores. El texto de los requisitos se muestra tal como está en la especificación, en inglés.

ID	Requisito
`BRC-1`	THE breadcrumbs SHALL be one navigation landmark named by label that holds one ordered list of its items, in the order the product gave them — from the top of the hierarchy to the page — each a list item with its position in the list, and nothing else that assistive technology reads but the overflow button; WHILE label is empty THE breadcrumbs SHALL still render, and in debug builds report that the landmark has no accessible name. WHILE it has no item THE breadcrumbs SHALL draw nothing, take no room and expose no landmark.
`BRC-2`	WHILE an item's href is a destination and its current is false THE breadcrumbs SHALL draw that level as the platform's own link to it (the web's anchor element in the document itself, not in a shadow root; SwiftUI's Link; on Compose, Flutter and React Native an element with the platform's link semantics whose address is opened by the platform's opener), so that whatever the platform gives a link — on the web its context menu, opening in a new tab or window, copying and dragging its address, the address shown before it is followed, a crawler that reads it, and a link that works before any script has run — is the platform's, and not the trail's to draw or to take over; it SHALL expose the link role, named by the item's label, and SHALL draw the label in comp.breadcrumbs.label.typescale and comp.breadcrumbs.item.content.color and, WHILE its underline is shown (BRC-30), with an underline comp.breadcrumbs.underline.width thick, comp.breadcrumbs.underline.offset below the text's baseline, in the label's color of its state, under the text only and not under a glyph. In the default system the underline is shown at rest and in every state: there, in a trail as in a sentence, the underline and not the color says that a level leads somewhere.
`BRC-3`	WHILE an item has no destination and its current is false THE breadcrumbs SHALL draw that level as text — its label in comp.breadcrumbs.label.typescale and comp.breadcrumbs.label.color, with no underline and no container — which is not focusable, answers no hover, focus or press, has no role of its own and emits nothing: it names a level of the hierarchy that has no page. IF an item's href names a script to run rather than a place to go (the web's javascript: scheme) or cannot be read as an address by the platform THE breadcrumbs SHALL draw that level so too, and in debug builds report it.
`BRC-4`	WHILE the last item's current is true THE breadcrumbs SHALL expose that level as the current page (on the web aria-current with the value page; on a platform without that state, the selected state) and SHALL draw its label in comp.breadcrumbs.current.content.color, with no underline, at the emphasized weight of its text style — that style's weight plus sys.typescale.emphasis.body — so that it is told from the levels above it by more than its color. WHILE that item has no destination it SHALL be text as BRC-3 says: not focusable, without states and without an event. WHILE it has a destination it SHALL be a link as BRC-2 says that keeps this look and answers hover, focus and press with the tokens of the current part. IF current is true on an item that is not the last THE breadcrumbs SHALL draw that item as if current were false, and in debug builds report it.
`BRC-5`	THE breadcrumbs SHALL open a destination in the context the person is in and in no other, SHALL draw no mark for a new context and SHALL draw no state for a destination already visited: the levels of one hierarchy replace the page the person is on, and a level's colors say what it is and what state it is in.
`BRC-6`	THE breadcrumbs SHALL draw one separator between every two neighbouring entries of the trail — levels and the overflow button alike — and none before the first or after the last: the glyph chevron_right of the system's icon set in a box comp.breadcrumbs.separator.size large, in comp.breadcrumbs.separator.color, comp.breadcrumbs.separator.gap from the entry on either side, centred on the line of the label beside it, drawn through the platform's icon helper with sys.icon.family.unselected and sys.icon.fill.unselected, sys.icon.weight and an optical size clamped between sys.icon.optical-size.min and sys.icon.optical-size.max. A separator SHALL be hidden from assistive technology, SHALL be no part of a level's name, link or hit area, and SHALL keep its color in every state of the levels beside it.
`BRC-7`	WHILE an item's icon names a glyph THE breadcrumbs SHALL draw it before the label in the reading direction, in a box comp.breadcrumbs.icon.size large, comp.breadcrumbs.container.gap from the label, centred on the label's line, in the color of the level's label and state, through the icon helper as BRC-6 draws a separator, hidden from assistive technology. WHILE iconOnly is also true THE breadcrumbs SHALL draw the glyph alone, with no label and no underline, its container a square one line of the trail's text high around it, and SHALL keep the item's label as its accessible name. WHILE an item's label is empty THE breadcrumbs SHALL still render it, and in debug builds report that the level has no name.
`BRC-8`	WHILE overflow is collapse THE breadcrumbs SHALL set the trail on one line, each label on one line, as wide as its entries need and no wider than the layout gives it, aligned to the start, and SHALL NOT wrap or scroll it.
`BRC-9`	WHILE overflow is collapse and the trail is wider than the width the layout gives it THE breadcrumbs SHALL take levels out of the trail and draw the overflow button once, in the place of the first level it took out: first the levels between the first and the last, beginning with the one next to the first and going on toward the last, each only if what is left still does not fit; then, if the first level, the button and the last level still do not fit, the first level as well, so that the button begins the trail. It SHALL NOT take out the last level, SHALL take out no more levels than the width asks for, and SHALL measure the trail with its separators and gaps, by the width it is given and not by the window's.
`BRC-10`	THE breadcrumbs SHALL draw the overflow button as the glyph more_horiz of the system's icon set in a box comp.breadcrumbs.icon.size large, in comp.breadcrumbs.overflow.content.color, drawn as BRC-6 draws a separator, in a container that is a square one line of the trail's text high with corners comp.breadcrumbs.container.shape; it SHALL be one list item of the trail holding one focusable element with the button role, named by overflowLabel, that says it opens a menu and whether that menu is open, and WHILE overflowLabel is empty SHALL still render and in debug builds report that the button has no accessible name. WHILE no level is taken out THE breadcrumbs SHALL draw no overflow button.
`BRC-11`	WHEN the user activates the overflow button by pointer, touch, Enter or Space THE breadcrumbs SHALL open a menu anchored to it, below it with the start edges aligned, that lists the levels taken out in the trail's order, each named by its label and showing its glyph where it has one: a level with a destination as an item that is a link to it, a level without one as a disabled item. What the menu draws, how focus enters it and moves in it, and how it closes are the menu's own (its spec's behaviours), and WHEN it closes without a level having been followed THE breadcrumbs SHALL return focus to the overflow button.
`BRC-12`	WHEN the width the layout gives the trail, a label, the text size or the layout direction changes THE breadcrumbs SHALL decide again which levels are taken out, at once and without a motion of its own; a level that fits again SHALL return to its place in the trail. WHEN a level that holds keyboard focus is taken out THE breadcrumbs SHALL move focus to the overflow button, and WHEN the overflow button is removed while it holds focus or its menu is open THE breadcrumbs SHALL close the menu and move focus to the first level that returned.
`BRC-13`	WHILE a level is taken out of the trail THE breadcrumbs SHALL keep it out of the list assistive technology reads and out of the focus order, reached through the menu alone; WHERE the platform's links are elements of a document (the web) THE breadcrumbs SHALL keep that level's link in the document, hidden, so that the whole trail is there for whatever reads the page as built and before any script has run.
`BRC-14`	WHILE overflow is collapse and the overflow button with the last level alone is still wider than the width the layout gives, or the trail has one level that is, THE breadcrumbs SHALL cut that level's label with an ellipsis at the end of its own direction (BRC-28), keeping the button, the separator and a glyph whole; the full label SHALL remain what assistive technology reads.
`BRC-15`	WHILE overflow is wrap THE breadcrumbs SHALL keep every level in the trail and draw no overflow button: it SHALL break the trail onto as many lines as it needs, comp.breadcrumbs.row-gap apart and aligned to the start, only after a separator, so that a separator ends a line and never begins one; a label longer than a line SHALL wrap where its language allows a break and, for a run with no such place, inside the run, and SHALL NOT be cut.
`BRC-16`	WHILE a level that is a link or the overflow button is hovered, keyboard-focused or pressed THE breadcrumbs SHALL render its container, its content — the label with its underline and glyph, or the button's glyph — and its opacity from the component tokens of its part (item, current, overflow) in the highest-precedence active state, with precedence pressed over focused over hovered; focus gained by pointer or touch SHALL NOT select the focused state. The container SHALL be the box of the content, with corners comp.breadcrumbs.container.shape, and SHALL take no room and move nothing beside it.
`BRC-17`	WHEN a level that is a link or the overflow button receives keyboard focus THE breadcrumbs SHALL show the focus ring around its container without animation — the system's focus indicator, sys.focus.offset from the container, sys.focus.outer-width wide in the focus-ring color, with the inner stroke of sys.focus.inner-width where the system has one — and, for a label that runs over several lines of a wrapped trail, around its part of each line; focus gained by pointer or touch SHALL NOT show it.
`BRC-18`	WHEN a level that is a link is pressed by pointer, touch or Enter, or the overflow button by pointer, touch, Enter or Space, THE breadcrumbs SHALL show the pressed state without delay and SHALL keep it visible for at least sys.motion.duration.press-hold, even when the press ends sooner.
`BRC-19`	WHILE pressed THE breadcrumbs SHALL answer as sys.behavior.pressed-feedback names: overlay applies the pressed tokens to the whole container at once; ripple grows the pressed state layer from the point of contact (from the center for keyboard activation); dim applies the pressed opacity to the whole control and draws no state layer; none draws no answer to the press. Under ripple and dim only the container color stays with the state under the press; content, opacity and shape still come from the pressed tokens. Under none every part stays with the state under the press. The ripple grows over comp.breadcrumbs.motion.feedback-duration with motion.state-easing, fades over motion.state-duration with motion.state-easing once the press has ended and press-hold has passed, and appears whole where motion is reduced.
`BRC-20`	THE breadcrumbs SHALL ease its container corners by sys.shape.corner-smoothing (0 is a quarter circle, 0.6 the iOS continuous corner; a platform with only the OS curve draws it for any amount above 0) and show its keyboard focus as sys.behavior.focus-style names (ring or glow); a platform that cannot draw a choice SHALL fall back to the first value and state that in its README.
`BRC-21`	THE breadcrumbs SHALL change a level or the overflow button between its states over comp.breadcrumbs.motion.state-duration with comp.breadcrumbs.motion.state-easing, and at once where motion is reduced.
`BRC-22`	WHEN the user activates a level that is a link in the trail by pointer, touch or Enter THE breadcrumbs SHALL emit that item's click exactly once and then open its href, unless the product cancelled that click, in which case it SHALL open nothing: the product's own router has taken the navigation. It SHALL NOT hold the navigation back for sys.motion.duration.press-hold. THE breadcrumbs SHALL NOT activate a link in the trail on Space, which on the web scrolls the page as it does on any link, and SHALL NOT show the pressed state for it; a level listed in the menu is the menu's link item, whose keys and activation are the menu's own (MNU-53, MNU-54: its click is emitted once and can be cancelled, the menu closes, then the destination opens, and Space activates it as it does every row of a menu); WHERE the platform gives its links other keys or gestures (on the web a modified or a middle click that opens a new tab, on Apple platforms a long press that previews) THE breadcrumbs SHALL leave them to the platform.
`BRC-23`	WHERE the visual size of a level that is a link or of the overflow button is below the minimum target THE breadcrumbs SHALL extend its hit area on both axes to sys.target.touch for touch input and sys.target.pointer for fine pointers, without changing its visual size or the room it takes, and on the axis of the trail no further than halfway to the entry beside it, so that no two hit areas overlap; a platform that cannot tell the input type SHALL use sys.target.touch.
`BRC-24`	WHERE the platform draws with a person's own forced colors (the web's forced-colors mode, and a platform's equivalent where it has one) THE breadcrumbs SHALL draw a level that is a link, with its underline and glyph, in the platform's link color, the current page, a level without a destination and the separators in its text color, the overflow button's glyph in its button text color, and the focus ring in its highlight color, and SHALL draw the underline of a level that is a link at rest, whatever underline and the tokens it follows say: the colors are then the person's, and nothing holds a link's color apart from a text level's.
`BRC-25`	WHILE the text size is enlarged THE breadcrumbs SHALL grow with its text — its labels, its containers and its hit areas — keeping comp.breadcrumbs.separator.gap, comp.breadcrumbs.container.gap, comp.breadcrumbs.underline.width, comp.breadcrumbs.underline.offset, comp.breadcrumbs.row-gap and its glyphs at comp.breadcrumbs.icon.size and comp.breadcrumbs.separator.size, and SHALL decide again what fits (BRC-12).
`BRC-26`	THE breadcrumbs SHALL take its layout direction from where it is used — the direction of the nearest ancestor that sets one, and the platform's own where none does — and SHALL have no direction setting of its own; WHEN that direction changes while the breadcrumbs is shown THE breadcrumbs SHALL draw itself for the new direction at once, without a motion of its own, keeping its focus and whether its menu is open.
`BRC-27`	WHERE the layout direction is right-to-left THE breadcrumbs SHALL lay the trail out from the right — the top of the hierarchy at the right and the page at the left, a level's glyph at the right of its label, the menu opening with its right edge on the button's — and SHALL draw each separator mirrored left to right, pointing to the left, the way the trail reads: the icon helper mirrors it inside its own box because the system's icon set marks chevron_right as mirrored. It SHALL draw a level's own glyph mirrored exactly when the icon set marks that glyph's name or the product forces mirroring for that use, and unmirrored when the product forbids it. THE breadcrumbs SHALL NOT mirror a glyph itself, and the reading and focus order SHALL stay from the top of the hierarchy to the page.
`BRC-28`	THE breadcrumbs SHALL lay out each label as text of its own direction, isolated from the text around it: it takes the base direction of its first strong character, or the layout direction where it has none, so that a left-to-right name, a number with its sign or unit and a version keep their own order in a right-to-left layout and reorder nothing beside them; THE breadcrumbs SHALL still place the label by the layout direction, not by the text's own, and SHALL cut a label that does not fit (BRC-14) at the end of its own direction, so that a left-to-right label in a right-to-left layout loses its right end and never its beginning.
`BRC-29`	WHEN overflow names a value the breadcrumbs does not have THE breadcrumbs SHALL behave as collapse, and in debug builds report the unknown value.
`BRC-30`	THE breadcrumbs SHALL show the underline of every level that is a link as its underline prop names: WHILE underline is auto, as comp.breadcrumbs.underline.visibility names, which follows sys.behavior.link-underline unless a design system sets the trail apart; WHILE underline is always, hover or never, as that value names, whatever the tokens say. always draws the line at rest and in every state; hover draws none at rest and draws it WHILE the level is hovered, keyboard-focused or pressed, the line arriving and leaving with that state as BRC-16 renders it and moving no level; never draws none in any state, and hover, focus and press are still shown by the container, the label color and the focus ring. The links of the overflow menu are menu items and are never underlined. WHEN underline, or the token it follows, changes THE breadcrumbs SHALL draw the other form at once, keeping its focus and what it has collapsed; WHEN underline names a value the breadcrumbs does not define THE breadcrumbs SHALL treat it as auto and in debug builds report the unknown value. A platform that cannot draw a choice SHALL fall back to the first value, always, and state that in its README.
`BRC-31`	WHERE the platform has ARIA attributes (the web), WHEN the product sets an aria- attribute on the host, by the attribute or by the ARIA property that reflects it, THE breadcrumbs SHALL move it to the data-aria- attribute of the same name, so that the host is no second node with its name, description or state, and SHALL expose it on its navigation landmark (BRC-1) — an id reference by the elements it names in the host's tree or a tree around it, a description after its own. WHILE label is not empty it is the landmark's name, over a name given so; WHILE label is empty, a name given so is the landmark's name and SHALL NOT be reported as having none in debug builds. WHEN the product removes the aria- attribute or its data-aria- twin, or sets the ARIA property that reflects it (ariaLabel, ariaDescribedByElements…) to null, THE breadcrumbs SHALL take it off that element.

Correspondencia de nombres por plataforma

Paridad no significa API idénticas. Cada plataforma expresa el mismo contrato con su propio estilo.

Especificación	Web	SwiftUI	Jetpack Compose	Flutter	React Native
Componente	`tanrei-breadcrumbs`	`TanreiBreadcrumbs`	`TanreiBreadcrumbs`	`TanreiBreadcrumbs`	`Breadcrumbs`
`label` · Propiedad	`label`	`label`	`contentDescription`	`semanticLabel`	`accessibilityLabel`
`overflow` · Propiedad	`overflow`	`overflow`	`overflow`	`overflow`	`overflow`
`overflowLabel` · Propiedad	`overflowLabel`	`overflowLabel`	`overflowContentDescription`	`overflowSemanticLabel`	`overflowAccessibilityLabel`
`underline` · Propiedad	`underline`	`underline`	`underline`	`underline`	`underline`
Notas	An element around the product's own anchors, which stay in the document (BRC-2, BRC-13): `<tanrei-breadcrumbs label="Breadcrumbs" overflow-label="Show hidden levels"><a href="/">Home</a><a href="/components/">Components</a><span aria-current="page">Button</span></tanrei-breadcrumbs>`. It is an element and not a class, as Link and Previous and next links are, because collapsing by width has to measure, which a stylesheet cannot do. The shadow root holds the landmark (`<nav aria-label>`), the ordered list with one `<li>` and one slot for each child (assigned by the element), the separators, and the overflow `<li>` with its button and a `tanrei-menu` whose items are links to the hidden levels; a hidden level's `<li>` is not displayed, and its anchor is still in the document. Before the element is defined, and with scripting off, a rule of the package's stylesheet for `tanrei-breadcrumbs:not(:defined)` draws the children as the wrap form — every level, separators from the icon font, links underlined — so the trail is complete and usable without script, without the landmark. `overflow-label` is the attribute of `overflowLabel`. The levels in the trail take the Link stylesheet's rules for a standalone link with this component's tokens. The menu's items are the menu's link items (MNU-53 to MNU-57). React: `Breadcrumbs` renders the element and its children and takes a `render` prop for a router's link. `underline="always \| hover \| never"` on the element; without it the trail follows `--tanrei-comp-breadcrumbs-underline-visibility`, read as the Link reads its own (a container style query, and `data-underline-system` on the document's root where the browser has none). The slotted anchors are styled by the element's `::slotted` rules, so the choice needs nothing on the anchors themselves.	`TanreiBreadcrumbs(label:overflowLabel:overflow:items:)`. Levels are built on SwiftUI's `Link`; the trail measures itself in a custom `Layout` and collapses there; the menu is `TanreiMenu`. The container is an accessibility container named by `label`; the current page has the `isSelected` trait. Not built on this platform yet: `underline`, an optional value of the same enumeration the Link takes; absent is auto.	`TanreiBreadcrumbs(items, contentDescription, overflowContentDescription, overflow, modifier)`. A custom `Layout` (or `SubcomposeLayout`) measures and collapses; the menu is `TanreiMenu`. Compose has no navigation landmark and no link role for a clickable element: the row is a semantics group with `collectionInfo`, the current page is `selected`, and the README says what is not exposed. Not built on this platform yet: `underline`, an optional value of the same enumeration the Link takes; absent is auto.	`TanreiBreadcrumbs(items: …, semanticLabel: …, overflowSemanticLabel: …, overflow: …)`. A `MultiChildRenderObjectWidget` (or `CustomMultiChildLayout`) measures and collapses; the menu is `TanreiMenu`. `Semantics(container: true, label:)` around the row; each link `Semantics(link: true)`, the current page `selected`. Not built on this platform yet: `underline`, an optional value of the same enumeration the Link takes; absent is auto.	`<Breadcrumbs accessibilityLabel="Breadcrumbs" overflowAccessibilityLabel="Show hidden levels" items={[…]} />`. Each link is a `Text` with `accessibilityRole="link"`; the trail measures its levels with `onLayout` and collapses in a second pass; the menu is `Menu`. `accessibilityState` carries `selected` for the current page. Follows the app's direction where an ancestor's is not known. Not built on this platform yet: `underline`, an optional value of the same enumeration the Link takes; absent is auto.

Tokens

Token	Alias de	Valor resuelto (claro)
`--tanrei-comp-breadcrumbs-container-gap`	`sys.space.space50`	4px
`--tanrei-comp-breadcrumbs-container-shape`	`sys.shape.corner.extra-small`	3px
`--tanrei-comp-breadcrumbs-current-container-color`	—	#000000 · 0%
`--tanrei-comp-breadcrumbs-current-content-color`	`sys.color.on-surface`	#1b1b1b
`--tanrei-comp-breadcrumbs-current-focused-container-color`	—	#1b1b1b · 10%
`--tanrei-comp-breadcrumbs-current-focused-content-color`	—	#1b1b1b
`--tanrei-comp-breadcrumbs-current-focused-state-layer-color`	—	#1b1b1b
`--tanrei-comp-breadcrumbs-current-hovered-container-color`	—	#1b1b1b · 8%
`--tanrei-comp-breadcrumbs-current-hovered-content-color`	—	#1b1b1b
`--tanrei-comp-breadcrumbs-current-hovered-state-layer-color`	—	#1b1b1b
`--tanrei-comp-breadcrumbs-current-pressed-container-color`	—	#1b1b1b · 10%
`--tanrei-comp-breadcrumbs-current-pressed-content-color`	—	#1b1b1b
`--tanrei-comp-breadcrumbs-current-pressed-state-layer-color`	—	#1b1b1b
`--tanrei-comp-breadcrumbs-current-state-layer-color`	`comp.breadcrumbs.current.content.color`	#1b1b1b
`--tanrei-comp-breadcrumbs-focused-container-shape`	—	3px
`--tanrei-comp-breadcrumbs-focused-opacity`	—	1
`--tanrei-comp-breadcrumbs-hovered-container-shape`	—	3px
`--tanrei-comp-breadcrumbs-hovered-opacity`	—	1
`--tanrei-comp-breadcrumbs-icon-size`	`sys.icon.extra-small`	16px
`--tanrei-comp-breadcrumbs-item-container-color`	—	#000000 · 0%
`--tanrei-comp-breadcrumbs-item-content-color`	`sys.color.link`	#1b1b1b
`--tanrei-comp-breadcrumbs-item-focused-container-color`	—	#1b1b1b · 10%
`--tanrei-comp-breadcrumbs-item-focused-content-color`	—	#1b1b1b
`--tanrei-comp-breadcrumbs-item-focused-state-layer-color`	—	#1b1b1b
`--tanrei-comp-breadcrumbs-item-hovered-container-color`	—	#1b1b1b · 8%
`--tanrei-comp-breadcrumbs-item-hovered-content-color`	—	#1b1b1b
`--tanrei-comp-breadcrumbs-item-hovered-state-layer-color`	—	#1b1b1b
`--tanrei-comp-breadcrumbs-item-pressed-container-color`	—	#1b1b1b · 10%
`--tanrei-comp-breadcrumbs-item-pressed-content-color`	—	#1b1b1b
`--tanrei-comp-breadcrumbs-item-pressed-state-layer-color`	—	#1b1b1b
`--tanrei-comp-breadcrumbs-item-state-layer-color`	`comp.breadcrumbs.item.content.color`	#1b1b1b
`--tanrei-comp-breadcrumbs-label-color`	`sys.color.on-surface-variant`	#4b4b4b
`--tanrei-comp-breadcrumbs-motion-feedback-duration`	`sys.motion.role.feedback`	450ms
`--tanrei-comp-breadcrumbs-motion-state-duration`	`sys.motion.role.state.compact`	200ms
`--tanrei-comp-breadcrumbs-motion-state-easing`	`sys.motion.easing.state`	cubic-bezier(0.2, 0, 0, 1)
`--tanrei-comp-breadcrumbs-overflow-container-color`	—	#000000 · 0%
`--tanrei-comp-breadcrumbs-overflow-content-color`	`sys.color.on-surface-variant`	#4b4b4b
`--tanrei-comp-breadcrumbs-overflow-focused-container-color`	—	#4b4b4b · 10%
`--tanrei-comp-breadcrumbs-overflow-focused-content-color`	—	#4b4b4b
`--tanrei-comp-breadcrumbs-overflow-focused-state-layer-color`	—	#4b4b4b
`--tanrei-comp-breadcrumbs-overflow-hovered-container-color`	—	#4b4b4b · 8%
`--tanrei-comp-breadcrumbs-overflow-hovered-content-color`	—	#4b4b4b
`--tanrei-comp-breadcrumbs-overflow-hovered-state-layer-color`	—	#4b4b4b
`--tanrei-comp-breadcrumbs-overflow-pressed-container-color`	—	#4b4b4b · 10%
`--tanrei-comp-breadcrumbs-overflow-pressed-content-color`	—	#4b4b4b
`--tanrei-comp-breadcrumbs-overflow-pressed-state-layer-color`	—	#4b4b4b
`--tanrei-comp-breadcrumbs-overflow-state-layer-color`	`comp.breadcrumbs.overflow.content.color`	#4b4b4b
`--tanrei-comp-breadcrumbs-pressed-container-shape`	—	3px
`--tanrei-comp-breadcrumbs-pressed-opacity`	—	1
`--tanrei-comp-breadcrumbs-row-gap`	`sys.space.space50`	4px
`--tanrei-comp-breadcrumbs-separator-color`	`sys.color.on-surface-variant`	#4b4b4b
`--tanrei-comp-breadcrumbs-separator-gap`	`sys.space.space50`	4px
`--tanrei-comp-breadcrumbs-separator-size`	`sys.icon.extra-small`	16px
`--tanrei-comp-breadcrumbs-underline-offset`	`sys.space.space25`	2px
`--tanrei-comp-breadcrumbs-underline-visibility`	`sys.behavior.link-underline`	0
`--tanrei-comp-breadcrumbs-underline-width`	`sys.border.hairline`	1px
`--tanrei-comp-breadcrumbs-label-typescale`	`sys.typescale.body`	400 14px/1.5714

Fixtures

Representaciones canónicas. Todas las plataformas capturan cada fixture con el mismo identificador para poder comparar los resultados.

default