Breadcrumb Item
<gstock-breadcrumb-item>
|
GstockBreadcrumbItem
Ejemplos
Básico
Un elemento de breadcrumb básico que se renderiza como un botón por defecto. Los elementos de breadcrumb normalmente se usan dentro del componente <gstock-breadcrumb>.
<gstock-breadcrumb-item>Elemento de breadcrumb</gstock-breadcrumb-item>Enlaces
Use el atributo href para convertir el elemento en un enlace. Esto renderiza un <a> internamente y proporciona todo el comportamiento nativo del navegador para enlaces.
<gstock-breadcrumb-item href="https://example.com/">Enlace simple</gstock-breadcrumb-item>
<gstock-breadcrumb-item href="https://example.com/" target="_blank">
Abrir en nueva ventana
</gstock-breadcrumb-item>
<gstock-breadcrumb-item href="/assets/images/wordmark.svg" download="gstock.svg">
Descargar archivo
</gstock-breadcrumb-item>Prefijo con Icono
Use el atributo prefix para añadir un icono antes del contenido del elemento. Esto es útil para proporcionar contexto visual adicional.
<gstock-breadcrumb-item prefix="home" href="#">Inicio</gstock-breadcrumb-item>
<gstock-breadcrumb-item prefix="folder" href="#">Documentos</gstock-breadcrumb-item>
<gstock-breadcrumb-item prefix="file-text" href="#">Archivo</gstock-breadcrumb-item>Prefijo con Slot
También puede usar el slot prefix para mayor flexibilidad. Este slot está optimizado para usar con <gstock-icon>, pero puede contener cualquier elemento.
<gstock-breadcrumb-item href="#">
<gstock-icon slot="prefix" name="home" size="small"></gstock-icon>
Inicio
</gstock-breadcrumb-item>
<gstock-breadcrumb-item href="#">
<gstock-icon slot="prefix" name="folder" size="small"></gstock-icon>
Proyectos
</gstock-breadcrumb-item>Sufijo con Icono
Use el atributo suffix para añadir un icono después del contenido del elemento.
<gstock-breadcrumb-item suffix="chevron-right" href="#">Siguiente</gstock-breadcrumb-item>
<gstock-breadcrumb-item suffix="external-link" href="https://example.com/" target="_blank">
Enlace externo
</gstock-breadcrumb-item>Sufijo con Slot
El slot suffix permite agregar elementos personalizados después del contenido.
<gstock-breadcrumb-item href="#">
Configuración
<gstock-icon slot="suffix" name="settings" size="small"></gstock-icon>
</gstock-breadcrumb-item>
<gstock-breadcrumb-item href="#">
Ayuda
<gstock-icon slot="suffix" name="help-circle" size="small"></gstock-icon>
</gstock-breadcrumb-item>Enlaces sin Navegación Nativa
Cuando necesites que un elemento se vea como un enlace pero sin usar el atributo href tradicional (por ejemplo, para manejar la navegación con JavaScript o frameworks), usa variant="link". Esto permite que el componente mantenga la apariencia de enlace mientras tú controlas el comportamiento de navegación.
<gstock-breadcrumb>
<gstock-breadcrumb-item variant="link">Inicio</gstock-breadcrumb-item>
<gstock-breadcrumb-item variant="link">Configuración</gstock-breadcrumb-item>
<gstock-breadcrumb-item variant="link">Automatizaciones</gstock-breadcrumb-item>
<gstock-breadcrumb-item>Crear Automatización</gstock-breadcrumb-item>
</gstock-breadcrumb>
<script type="module">
customElements.whenDefined('gstock-breadcrumb').then(() => {
const items = document.querySelectorAll('gstock-breadcrumb-item[variant="link"]');
items.forEach((item, index) => {
item.addEventListener('click', () => {
alert(`Navegando a: ${item.textContent.trim()}`);
});
});
});
</script>
<style>
gstock-breadcrumb-item[variant='link'] {
cursor: pointer;
}
</style>Ejemplo con Angular RouterLink:
<gstock-breadcrumb-item variant="link" [routerLink]="['/configuracion']">
Configuración
</gstock-breadcrumb-item>
Ejemplo con React Router:
<gstock-breadcrumb-item variant="link" onClick={() => navigate('/configuracion')}>
Configuración
</gstock-breadcrumb-item>