Breadcrumb — Fluent UI Svelte

Breadcrumb muestra dónde se sitúa una página dentro de la jerarquía que tiene encima, y le da al lector una forma de volver hacia arriba. Renderiza un punto de referencia `nav` alrededor de una lista ordenada, de modo que un lector de pantalla puede saltar directamente a él y un buscador puede leer la ruta.

El punto de referencia se llama a sí mismo `Breadcrumb`, el último paso lleva `aria-current` y los separadores quedan fuera del árbol de accesibilidad — una ruta de tres pasos se lee como tres, no como cinco. Todo eso se puede sobrescribir: pasa tu propio `aria-label`, o un `aria-labelledby`, y el valor por defecto se aparta.

Para crear un breadcrumb, necesitarás usar los siguientes componentes:

Breadcrumb: El punto de referencia y la lista. Crea el contexto que leen los demás.
BreadcrumbItem: Un paso de la ruta — el elemento de lista donde vive el paso. Admite cualquier cosa, no solo un paso.
BreadcrumbButton: Un paso que se puede activar: un anchor cuando lleva a algún sitio, un botón cuando hace algo.
BreadcrumbDivider: La marca entre dos pasos. Es decoración, y está oculta para la tecnología de asistencia.

Uso

Un breadcrumb es una lista de pasos con un separador entre ellos. El último paso es la página en la que el lector ya está, así que se marca con `current` en vez de enlazarse.

<script>
	import { Breadcrumb, BreadcrumbItem, BreadcrumbButton, BreadcrumbDivider } from 'fluentui-svelte';
</script>

<Breadcrumb>
	<BreadcrumbItem>
		<BreadcrumbButton as="a" href="/">Home</BreadcrumbButton>
	</BreadcrumbItem>
	<BreadcrumbDivider />
	<BreadcrumbItem>
		<BreadcrumbButton as="a" href="/files">Files</BreadcrumbButton>
	</BreadcrumbItem>
	<BreadcrumbDivider />
	<BreadcrumbItem>
		<BreadcrumbButton current>Quarterly report</BreadcrumbButton>
	</BreadcrumbItem>
</Breadcrumb>

Tamaño

`size` fija de una vez la tipografía, la altura y el separador de todos los pasos.

Ver Código

<Breadcrumb size="small">...</Breadcrumb>
<Breadcrumb size="medium">...</Breadcrumb>
<Breadcrumb size="large">...</Breadcrumb>

Ícono

`icon` acepta un snippet o un componente y lo renderiza junto a la etiqueta, del lado que pida `iconPosition`.

Ver Código

<BreadcrumbItem>
  <BreadcrumbButton as="a" href="/files" icon={FolderRegular}>Files</BreadcrumbButton>
</BreadcrumbItem>

Paso actual

`current` marca el paso como la página donde termina la ruta. Anuncia `aria-current` y se lee como texto y no como una salida, así que el último paso no se ofrece a llevar al lector donde ya está.

Ver Código

<BreadcrumbItem>
  <BreadcrumbButton current>Quarterly report</BreadcrumbButton>
</BreadcrumbItem>

Menú de desbordamiento

Un paso admite lo que le metas, así que una ruta larga pliega su parte central en un menú convirtiendo ese menú en un paso más. Qué pasos se pliegan lo decides tú — corta la lista por donde lo pida el diseño. La etiqueta del botón del menú la escribes tú, y vale la pena escribirla: un disparador con solo un icono no le dice nada a un lector de pantalla.

Ver Código

<script>
  // Keep the root and the last two steps; everything between them goes into the menu.
  const head = trail.slice(0, 1);
  const folded = trail.slice(1, -2);
  const tail = trail.slice(-2);
</script>

<Breadcrumb>
  {#each head as item (item.name)}
    <BreadcrumbItem>
      <BreadcrumbButton as="a" href={item.href}>{item.name}</BreadcrumbButton>
    </BreadcrumbItem>
    <BreadcrumbDivider />
  {/each}

  <!-- A step takes whatever you put in it, so the menu is just another step. -->
  <BreadcrumbItem>
    <Menu>
      <MenuTrigger>
        {#snippet children({ state, menuTriggerProps })}
          <Button bind:ref={state.ref} {...menuTriggerProps} appearance="subtle" aria-label={`${folded.length} more steps`}>
            <MoreHorizontalRegular />
          </Button>
        {/snippet}
      </MenuTrigger>
      <MenuPopover>
        <MenuList>
          <!-- A step that goes somewhere is a link, in the menu as much as in the trail. -->
          {#each folded as item (item.name)}
            <MenuItem href={item.href}>{item.name}</MenuItem>
          {/each}
        </MenuList>
      </MenuPopover>
    </Menu>
  </BreadcrumbItem>
  <BreadcrumbDivider />

  {#each tail as item, index (item.name)}
    <BreadcrumbItem>
      {#if index === tail.length - 1}
        <BreadcrumbButton current>{item.name}</BreadcrumbButton>
      {:else}
        <BreadcrumbButton as="a" href={item.href}>{item.name}</BreadcrumbButton>
      {/if}
    </BreadcrumbItem>
    {#if index < tail.length - 1}
      <BreadcrumbDivider />
    {/if}
  {/each}
</Breadcrumb>

Modo de foco

`focusMode` decide cómo recorre el foco la ruta. `tab`, el valor por defecto, deja a cada paso su propia parada de tabulación, que es lo que un lector espera de una fila de enlaces. `arrow` le da a toda la ruta una sola parada y se mueve entre pasos con las flechas, con `Home` y `End` para los extremos.

Ver Código

<Breadcrumb focusMode="arrow">...</Breadcrumb>

Propiedades del componente (Breadcrumb)

Name	Type	Default	Description
`ref` bindable	`HTMLElement`		La referencia del DOM del `nav`.
`listRef` bindable	`HTMLOListElement`		La referencia del DOM de la lista.
`listProps`	`HTMLOlAttributes`		Las props que se aplican al elemento de la lista.
`size`	`'small'` \| `'medium'` \| `'large'`	`'medium'`	El tamaño de todos los pasos y separadores de la ruta.
`focusMode`	`'tab'` \| `'arrow'`	`'tab'`	Cómo recorre el foco la ruta: `tab` deja a cada paso su propia parada de tabulación, `arrow` le da a la ruta una sola y se mueve entre pasos con las flechas.
Element Attributes

Propiedades del componente (BreadcrumbItem)

Name	Type	Default	Description
`ref` bindable	`HTMLLIElement`		La referencia del DOM del elemento.
Element Attributes (`li`)

Propiedades del componente (BreadcrumbButton)

Name	Type	Default	Description
`ref` bindable	`BreadcrumbItemElementDOMType[T]`		La referencia del DOM del paso.
`as`	`'button'` \| `'a'`	`'button'`	El elemento del DOM que se renderiza. Un paso que lleva a algún sitio es un anchor y acepta `href`.
`icon`	`Snippet` \| `Component`		El icono que se muestra junto a la etiqueta.
`iconPosition`	`'before'` \| `'after'`	`'before'`	De qué lado de la etiqueta se sitúa el icono.
`current`	`boolean`	`false`	Marca el paso como la página donde termina la ruta, que es lo que anuncia `aria-current`.
`disabled`	`boolean`		Deshabilita la interacción del usuario.
`disabledFocusable`	`boolean`	`false`	Mantiene enfocable un paso deshabilitado, para que el orden de tabulación no cambie para quien usa teclado o lector de pantalla.
HTML Attributes

Propiedades del componente (BreadcrumbDivider)

Name	Type	Default	Description
`ref` bindable	`HTMLLIElement`		La referencia del DOM del separador.
Element Attributes (`li`)

Accesibilidad

Dale al punto de referencia tu propio `aria-label` cuando una página lleve más de una ruta, para que se distingan, o un `aria-labelledby` que apunte a un encabezado que ya renderizas. Los separadores están ocultos, así que la lista se lee con los pasos que tiene, y el último lleva `aria-current`. Un paso con icono y sin etiqueta necesita su propio `aria-label`. Los datos estructurados quedan en tus manos: un buscador lee una ruta a través de `BreadcrumbList` de schema.org, pero el texto de un paso vive en tu marcado y las URLs viven en tu enrutado, así que la ruta que publicas la construyes tú.