Visualización
SBreadcrumbs
Un componente de navegación que muestra la ubicación de la página actual dentro de una estructura jerárquica, ayudando a los usuarios a comprender su posición en la aplicación.
Tests
100%
Uso
El componente SBreadcrumbs funciona como contenedor para componentes SBreadcrumbsItem. Cada item representa un nivel en la jerarquía de navegación.
Estado Activo
El último elemento del breadcrumb debe tener active establecido en true para indicar la página actual. Los elementos activos se estilizan con texto más oscuro y establecen aria-current="page" para accesibilidad.
Primer Elemento
Establece first en true en el primer elemento para ocultar el separador de chevron.
Con Icono
Usa la prop icon para mostrar un icono antes del texto del breadcrumb.
Separador Personalizado
Usa el slot separator en SBreadcrumbsItem para reemplazar el separador de chevron por defecto.
Elemento Personalizado
Usa la prop as para renderizar el elemento del breadcrumb como un elemento o componente diferente, útil para la integración con el router.
SBreadcrumbs Slots
| Nombre | Descripción |
|---|---|
default | Contenedor para componentes SBreadcrumbsItem |
SBreadcrumbsItem Props
| Prop | Tipo | Default | Descripción |
|---|---|---|---|
first | boolean | false | Si este es el primer elemento (oculta el separador) |
href | string | - | La URL a la que enlaza este elemento del breadcrumb |
active | boolean | false | Si este elemento representa la página actual |
icon | FunctionalComponent | - | Icono opcional a mostrar antes del texto |
as | string | Component | 'a' | El componente o elemento para renderizar el enlace |
SBreadcrumbsItem Slots
| Nombre | Descripción |
|---|---|
default | El contenido de texto del elemento del breadcrumb |
separator | Elemento separador personalizado (reemplaza el chevron por defecto, no se muestra cuando first es true) |