Breadcrumb

Vista previa

Este ejemplo usa estilos solo para documentación. En producción, utiliza una de las recetas incluidas (CSS, Tailwind o UnoCSS).

Breadcrumb renderiza un indicador de navegación jerárquica que comunica la ubicación de la página actual dentro de una jerarquía de navegación. Utiliza estructura de lista semántica con marcado ARIA adecuado para compatibilidad con lector de pantalla.

#Uso

Breadcrumb proporciona partes componibles: Root, List, Item, Link, Separator y Ellipsis. Compónlas para construir rutas de migas de pan de cualquier profundidad.

import * as Breadcrumb from "@solidiom/breadcrumb"

;<Breadcrumb.Root>
  <Breadcrumb.List>
    <Breadcrumb.Item>
      <Breadcrumb.Link href="/">Inicio</Breadcrumb.Link>
    </Breadcrumb.Item>
    <Breadcrumb.Separator />
    <Breadcrumb.Item>
      <Breadcrumb.Link href="/docs">Documentación</Breadcrumb.Link>
    </Breadcrumb.Item>
    <Breadcrumb.Separator />
    <Breadcrumb.Item>
      <Breadcrumb.Link href="/docs/breadcrumb" current>
        Breadcrumb
      </Breadcrumb.Link>
    </Breadcrumb.Item>
  </Breadcrumb.List>
</Breadcrumb.Root>

#Instalación

Instala el paquete con pnpm add @solidiom/breadcrumb. El paquete requiere dependencias pares compatibles de solid-js y @solidjs/web.

#Partes y Props

#Root

Envuelve toda la navegación de migas de pan. Se renderiza como un elemento <nav> con aria-label="Breadcrumb".

#List

Envuelve los elementos del breadcrumb. Se renderiza como un elemento <ol>.

#Item

Envuelve una entrada individual del breadcrumb. Se renderiza como un elemento <li>.

#Link

Enlace de navegación dentro de un elemento del breadcrumb. Se renderiza como un elemento <a>.

#Separator

Separador visual entre elementos del breadcrumb. Se renderiza como un <span> con role="presentation" y aria-hidden="true".

#Ellipsis

Indica elementos del breadcrumb omitidos en una ruta truncada. Se renderiza como un <span> con role="presentation".

#Estilos

Breadcrumb lleva los atributos data-scope="breadcrumb" y data-part en cada parte (root, list, item, link, separator, ellipsis). Estílalo con espaciado, tipografía o colores apropiados para tu sistema de diseño. Apunta a los elementos usando los atributos data para un estilizado robusto.

#Interacción con teclado

Este primitivo no tiene interacción con teclado. Renderiza contenido estático que no recibe foco ni responde a eventos de teclado.

#Renderizado SSR e hidratación

Breadcrumb es un elemento de visualización pasivo sin estado interactivo más allá de la navegación estándar de enlaces. Se renderiza como HTML estático y no requiere hidratación en el cliente.

solidiom add breadcrumb