Componentes · Ola 2 · Navegación

Breadcrumb

La ruta de la página actual, del primer nivel al último, con links para subir. La página actual se marca con aria-current y, en pantallas angostas, los niveles intermedios se colapsan detrás de un botón.

import { Breadcrumb } from '@archeblack/ui';

Ejemplos

Ruta

Links en text-muted con un subrayado tenue, la página actual en text-strong y chevrons entre niveles.

Svelte

<script lang="ts">
	import { Breadcrumb } from '@archeblack/ui';
</script>

<Breadcrumb
	items={[
		{ label: 'Proyectos', href: '#projects' },
		{ label: 'Portal de clientes', href: '#portal' },
		{ label: 'Ajustes' }
	]}
/>

Ruta larga

Con cuatro niveles o más, en pantallas de hasta 40 rem los intermedios se colapsan detrás de «…». Achica la ventana para verlo. Colapsada, la página actual se queda en la línea si le quedan al menos 8 rem; si no, baja entera a una segunda línea. Si ni así entra, se corta con elipsis y el lector sigue leyendo su nombre completo.

Svelte

<script lang="ts">
	import { Breadcrumb } from '@archeblack/ui';
</script>

<!--
	Seis niveles. En pantallas de hasta 40 rem se ven el primero, «…» y los dos últimos; el botón
	muestra los demás. En pantallas anchas se ven todos.
-->
<Breadcrumb
	items={[
		{ label: 'Inicio', href: '#home' },
		{ label: 'Proyectos', href: '#projects' },
		{ label: 'Portal de clientes', href: '#portal' },
		{ label: 'Ajustes', href: '#settings' },
		{ label: 'Dominios', href: '#domains' },
		{ label: 'portal.arche.dev' }
	]}
/>

Un nivel sin página

Un nivel sin href es texto, sin subrayado. La página actual puede llevar href: sigue marcada con aria-current y tampoco se subraya.

Svelte

<script lang="ts">
	import { Breadcrumb } from '@archeblack/ui';
</script>

<!-- «Guías» no tiene página propia: sin href es texto. La actual lleva href y aria-current. -->
<Breadcrumb
	items={[
		{ label: 'Documentación', href: '#docs' },
		{ label: 'Guías' },
		{ label: 'Instalación', href: '#install' }
	]}
/>

Props

Props de Breadcrumb
Prop	Descripción
`items` `BreadcrumbItem[]`	Los niveles, del primero a la página actual (el último). Cada uno es `{ label: string; href?: string }`. Sin `href` el nivel es texto; en el último, con `href` es un link con `aria-current="page"`.
`collapse?` `boolean` Por defecto `true`	En pantallas de hasta 40 rem, con cuatro niveles o más, muestra el primero, un botón «…» y los dos últimos. El botón muestra los ocultos. En pantallas anchas se ven siempre todos.
`expandLabel?` `string` Por defecto `'Mostrar la ruta completa'`	Nombre accesible del botón «…», para productos en otro idioma.
`aria-label?` `string` Por defecto `'Ruta de navegación'`	Nombre del `<nav>`.
`class?` `ClassValue`	Clases del producto; se suman a `arche-breadcrumb`.
`...rest` `HTMLAttributes<HTMLElement>`	Cualquier otro atributo va al `<nav>` raíz.

Accesibilidad

Es un <nav> con nombre («Ruta de navegación» por defecto) y una lista ordenada (<ol>): el lector anuncia la región y cuántos niveles hay.
La página actual lleva aria-current="page" y se ve en text-strong con peso medio, no solo con el color.
Los separadores son chevrons decorativos (aria-hidden): el lector no los lee. En un idioma de derecha a izquierda apuntan a la izquierda.
Los links están en text-muted con un subrayado tenue siempre visible; en hover el texto pasa a text-strong y el subrayado se enciende. Un nivel sin link va en el mismo color, sin subrayado: se distinguen por la forma, no por el contraste. Miden 24 px de alto.
Si la ruta no entra en una línea, se parte entre niveles y nunca dentro de uno: cada chevron va al final de su nivel, así ninguna línea empieza con un separador suelto. Un nombre que no entra ni solo en la línea se corta con elipsis; el texto completo sigue en la página y el lector lo lee entero.
En pantallas angostas, el botón «…» tiene nombre («Mostrar la ruta completa»). Al usarlo desaparece y el foco pasa al primer nivel que apareció, así no cae en el <body>.
Los niveles ocultos no están en la página para nadie (tampoco para el lector) hasta que se muestran; la ruta completa sigue un botón más allá.

Qué evitar

Una ruta en un sitio de un solo nivel, o que repite el menú principal. Solo en jerarquías de tres niveles o más, donde ayuda a subir.
La historia de lo que la persona visitó. La jerarquía del sitio: la ruta es la misma venga de donde venga.
Un link en la página actual que la vuelve a cargar sin avisar. El último nivel sin href (texto), o con href si la URL sirve para copiarla; en los dos casos lleva aria-current.
Nombres distintos a los títulos de las páginas. El mismo nombre que el título de cada página, más corto si hace falta.