Breadcrumb Nuevo

El componente hp-breadcrumb implementa el patrón WAI-ARIA Breadcrumb, proporcionando una estructura de navegación accesible con soporte para separadores, elipsis y página actual.

Demostración

Sin estilos (solo base.css)

Inicio/Componentes/Breadcrumb

Con estilos personalizados

Inicio/Componentes/.../Breadcrumb

index.html

<hp-breadcrumb class="breadcrumb">
  <hp-breadcrumb-list class="breadcrumb-list">
    <hp-breadcrumb-item class="breadcrumb-item">
      <hp-breadcrumb-link href="/" class="link">Home</hp-breadcrumb-link>
      <hp-breadcrumb-separator class="separator">/</hp-breadcrumb-separator>
    </hp-breadcrumb-item>
    <hp-breadcrumb-item class="breadcrumb-item">
      <hp-breadcrumb-page class="page">Breadcrumb</hp-breadcrumb-page>
    </hp-breadcrumb-item>
  </hp-breadcrumb-list>
</hp-breadcrumb>

style.css

.breadcrumb-list {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.link {
  color: #2563eb;
  text-decoration: none;
}
.page {
  color: #64748b;
  font-weight: 500;
}
.separator {
  color: #94a3b8;
}

Instalación

pnpm

pnpm add @headless-primitives/breadcrumb

npm

npm install @headless-primitives/breadcrumb

yarn

yarn add @headless-primitives/breadcrumb

bun

bun add @headless-primitives/breadcrumb

Features

• ♿️ role="navigation", aria-label y aria-current="page" gestionados automáticamente.
• ⌨️ Navegación por teclado con Enter y Space en los links.
• 🎨 Sin estilos visuales (Headless).
• 📐 Soporte para separadores decorativos y elipsis colapsables.

Anatomía

<hp-breadcrumb>
  <hp-breadcrumb-list>
    <hp-breadcrumb-item>
      <hp-breadcrumb-link href="/"></hp-breadcrumb-link>
      <hp-breadcrumb-separator>/</hp-breadcrumb-separator>
    </hp-breadcrumb-item>
    <hp-breadcrumb-item>
      <hp-breadcrumb-ellipsis>...</hp-breadcrumb-ellipsis>
      <hp-breadcrumb-separator>/</hp-breadcrumb-separator>
    </hp-breadcrumb-item>
    <hp-breadcrumb-item>
      <hp-breadcrumb-page></hp-breadcrumb-page>
    </hp-breadcrumb-item>
  </hp-breadcrumb-list>
</hp-breadcrumb>

API Reference

hp-breadcrumb

Contenedor principal con semántica de navegación.

Atributos / Propiedades

Atributo / Propiedad	Tipo	Por Defecto	Descripción
aria-label / label	string	"Breadcrumb"	Etiqueta de accesibilidad para el nav.

Atributos ARIA gestionados automáticamente

• role="navigation" — Asignado si no se especifica.
• aria-label — Sincronizado con la propiedad label.

hp-breadcrumb-list

Contenedor de lista para los items.

hp-breadcrumb-item

Wrapper de cada item del breadcrumb.

hp-breadcrumb-link

Enlace de navegación.

Atributos / Propiedades

Atributo / Propiedad	Tipo	Por Defecto	Descripción
href	string	""	URL del enlace.

Eventos

Evento	Detalle	Descripción
hp-click	{ href: string }	Se emite al hacer click en el link.

Atributos ARIA gestionados automáticamente

• role="link" — Asignado si no se especifica.
• tabindex="0" — Habilitado cuando tiene href.

hp-breadcrumb-page

Página actual en el breadcrumb.

Atributos ARIA gestionados automáticamente

• role="link" — Asignado si no se especifica.
• aria-current="page" — Siempre presente.

hp-breadcrumb-separator

Separador decorativo entre items.

Atributos ARIA gestionados automáticamente

• aria-hidden="true" — Oculto para screen readers.
• role="presentation" — Semánticamente decorativo.

hp-breadcrumb-ellipsis

Indicador de estado colapsado.

Atributos ARIA gestionados automáticamente

• aria-hidden="true" — Oculto para screen readers.
• role="presentation" — Semánticamente decorativo.

Accesibilidad

Adhiere al patrón WAI-ARIA APG para Breadcrumb.

Navegación por teclado

Tecla	Acción
Enter	Activa el link bajo foco.
Space	Activa el link bajo foco.
Tab	Navega entre links focusables.