Breadcrumb Migas de Pan
Introducción
El componente Breadcrumb es una ayuda de navegación que muestra la ubicación de la página actual dentro de una estructura jerárquica del sitio. Ayuda a los usuarios a rastrear su ruta desde la página de inicio hasta su posición actual y navegar hacia arriba por la jerarquía fácilmente.
El Breadcrumb está totalmente integrado como un bloque breadcrumb en el Page Builder, lo que permite a editores de contenido y desarrolladores configurar fácilmente estilos visuales, divisores/separadores y tamaños responsivos directamente en el CMS.
Uso
Estos ejemplos ilustran cómo los editores de contenido enlazan y estructuran componentes de navegación.
1. Migas de pan de navegación estándar
Una configuración clásica de migas de pan jerárquicas que muestra la página de inicio, la categoría secundaria y el marcador de texto de página terminal.
{
"type": "breadcrumb",
"items": [
{ "label": "Home", "href": "/" },
{ "label": "Components", "href": "/components" },
{ "label": "Breadcrumb" }
]
}
2. Separador personalizado (divisor de barra)
Utiliza un carácter de divisor de texto personalizado (como una barra "/") para separar los elementos de navegación.
{
"type": "breadcrumb",
"separator": "/",
"items": [
{ "label": "Home", "href": "/" },
{ "label": "Library", "href": "/library" },
{ "label": "Overview" }
]
}
3. Tamaño y estilo visual acentuado
Ajusta la escala general a pequeña y aplica un estilo visual de subrayado personalizado para una sensación de diseño resaltado.
{
"type": "breadcrumb",
"variant": "underline",
"size": "sm",
"items": [
{ "label": "Console", "href": "/console" },
{ "label": "Resources", "href": "/console/resources" },
{ "label": "Deployments" }
]
}
Propiedades
| Propiedad | Tipo de campo CMS | Predeterminado | Descripción / Opciones admitidas |
|---|---|---|---|
Separador (separator) | string | "chevron-right" | Carácter divisor personalizado colocado entre elementos. |
Estilo visual (variant) | select | "plain" | El estilo visual de los enlaces. • Opciones: "plain", "underline". |
Escala de tamaño (size) | select | "md" | Controla la escala general de fuente y chevron. • Opciones: "xs", "sm", "md", "lg". |
Elementos de navegación (items) | list | [] | Colección ordenada de elementos de página. (Ver esquema de elementos de migas de pan abajo). |
Clase personalizada (class) | string | - | Anulaciones de clase CSS personalizadas aplicadas directamente al contenedor de migas de pan. |
Esquema de elementos de migas de pan
Cada entrada dentro del array items acepta los siguientes parámetros:
| Propiedad | Tipo de campo CMS | Requerido | Descripción |
|---|---|---|---|
Texto visible (label) | string | Sí | Texto de etiqueta renderizado para el segmento del elemento. |
Ruta de destino (href) | string | No | URL de destino o ruta de página. Si se omite, se renderiza como texto plano de la página actual. |
Página actual (current) | boolean | false | Establece el elemento para denotar la página activa (automáticamente true para el último elemento). |
Notas para desarrolladores y accesibilidad
- Jerarquía conforme a ARIA: El componente se renderiza automáticamente dentro de un elemento de navegación semántico accesible (
<nav aria-label="Breadcrumb">). - ARIA de página activa: El elemento terminal final (donde
hrefse omite ocurrentestá configurado) recibe automáticamentearia-current="page"para cumplir con las pautas de accesibilidad de lectores de pantalla. - Estilo de micro-interacción: Los enlaces heredan automáticamente desencadenadores y transiciones de hover del diseño, reflejando suavemente los acentos de la paleta de colores principal.