English Español Light Dark System

Breadcrumb

<gstock-breadcrumb> | GstockBreadcrumb

Examples

Básico

Un breadcrumb básico con varios elementos. Por defecto, los elementos se renderizan como botones. Use el atributo href en los items para convertirlos en enlaces.

Inicio Documentos Proyectos Proyecto 2024 
<gstock-breadcrumb>
  <gstock-breadcrumb-item>Inicio</gstock-breadcrumb-item>
  <gstock-breadcrumb-item>Documentos</gstock-breadcrumb-item>
  <gstock-breadcrumb-item>Proyectos</gstock-breadcrumb-item>
  <gstock-breadcrumb-item>Proyecto 2024</gstock-breadcrumb-item>
</gstock-breadcrumb>

Enlaces de Navegación

Cuando necesita enlaces tradicionales para navegación entre páginas, agregue el atributo href a cada elemento de breadcrumb. Esto convierte internamente el elemento en un <a> con todo el comportamiento nativo del navegador.

Inicio Nuestros Servicios Desarrollo Web Frontend 
<gstock-breadcrumb>
  <gstock-breadcrumb-item href="/">Inicio</gstock-breadcrumb-item>
  <gstock-breadcrumb-item href="/servicios">Nuestros Servicios</gstock-breadcrumb-item>
  <gstock-breadcrumb-item href="/servicios/desarrollo">Desarrollo Web</gstock-breadcrumb-item>
  <gstock-breadcrumb-item href="/servicios/desarrollo/frontend">Frontend</gstock-breadcrumb-item>
</gstock-breadcrumb>

Separadores Personalizados

Use el slot separator para cambiar el separador que aparece entre los elementos del breadcrumb. Funciona mejor con iconos, pero también puede usar texto o imágenes.

Primero Segundo Tercero
Primero Segundo Tercero
/ Primero Segundo Tercero 
<gstock-breadcrumb>
  <gstock-icon name="more-horizontal" slot="separator" size="small"></gstock-icon>
  <gstock-breadcrumb-item href="#">Primero</gstock-breadcrumb-item>
  <gstock-breadcrumb-item href="#">Segundo</gstock-breadcrumb-item>
  <gstock-breadcrumb-item href="#">Tercero</gstock-breadcrumb-item>
</gstock-breadcrumb>

<br>

<gstock-breadcrumb>
  <gstock-icon name="arrow-right" slot="separator" size="small"></gstock-icon>
  <gstock-breadcrumb-item href="#">Primero</gstock-breadcrumb-item>
  <gstock-breadcrumb-item href="#">Segundo</gstock-breadcrumb-item>
  <gstock-breadcrumb-item href="#">Tercero</gstock-breadcrumb-item>
</gstock-breadcrumb>

<br>

<gstock-breadcrumb>
  <span slot="separator">/</span>
  <gstock-breadcrumb-item href="#">Primero</gstock-breadcrumb-item>
  <gstock-breadcrumb-item href="#">Segundo</gstock-breadcrumb-item>
  <gstock-breadcrumb-item href="#">Tercero</gstock-breadcrumb-item>
</gstock-breadcrumb>

<style>
  gstock-breadcrumb {
    margin-bottom: var(--gstock-space-margin-block-md);
  }

  gstock-breadcrumb:last-child {
    margin-bottom: 0;
  }
</style>

Con Prefijos

Use el slot prefix en los elementos individuales para agregar iconos o contenido antes de cualquier elemento del breadcrumb.

Inicio Blog Tecnología 
<gstock-breadcrumb>
  <gstock-breadcrumb-item href="#">
    <gstock-icon slot="prefix" name="home" size="small"></gstock-icon>
    Inicio
  </gstock-breadcrumb-item>
  <gstock-breadcrumb-item href="#">Blog</gstock-breadcrumb-item>
  <gstock-breadcrumb-item href="#">Tecnología</gstock-breadcrumb-item>
</gstock-breadcrumb>

Con Sufijos

Use el slot suffix en los elementos individuales para agregar contenido después de cualquier elemento del breadcrumb.

Documentos Políticas Seguridad 
<gstock-breadcrumb>
  <gstock-breadcrumb-item href="#">Documentos</gstock-breadcrumb-item>
  <gstock-breadcrumb-item href="#">Políticas</gstock-breadcrumb-item>
  <gstock-breadcrumb-item href="#">
    Seguridad
    <gstock-icon slot="suffix" name="shield" size="small"></gstock-icon>
  </gstock-breadcrumb-item>
</gstock-breadcrumb>

Con Iconos

Puede combinar los atributos prefix y suffix para crear breadcrumbs con iconos que proporcionen contexto visual adicional.

Inicio Recursos Documentación 
<gstock-breadcrumb>
  <gstock-breadcrumb-item prefix="home" href="#">Inicio</gstock-breadcrumb-item>
  <gstock-breadcrumb-item prefix="folder" href="#">Recursos</gstock-breadcrumb-item>
  <gstock-breadcrumb-item prefix="file-text" href="#">Documentación</gstock-breadcrumb-item>
</gstock-breadcrumb>

Con Menús Desplegables

Los menús desplegables pueden colocarse en los slots prefix o suffix para proporcionar opciones adicionales de navegación o acciones relacionadas.

Inicio Servicios Desarrollo Web Más opciones Desarrollo Web Aplicaciones Móviles Marketing Digital 
<gstock-breadcrumb>
  <gstock-breadcrumb-item href="#">Inicio</gstock-breadcrumb-item>
  <gstock-breadcrumb-item href="#">Servicios</gstock-breadcrumb-item>
  <gstock-breadcrumb-item href="#">Desarrollo Web</gstock-breadcrumb-item>
  <gstock-breadcrumb-item href="#">
    Más opciones
    <gstock-dropdown slot="suffix">
      <gstock-button slot="trigger" size="small" variant="plain">
        <gstock-icon label="Más opciones" name="more-horizontal" size="small"></gstock-icon>
      </gstock-button>
      <gstock-menu>
        <gstock-menu-item type="checkbox" checked>Desarrollo Web</gstock-menu-item>
        <gstock-menu-item type="checkbox">Aplicaciones Móviles</gstock-menu-item>
        <gstock-menu-item type="checkbox">Marketing Digital</gstock-menu-item>
      </gstock-menu>
    </gstock-dropdown>
  </gstock-breadcrumb-item>
</gstock-breadcrumb>

Cuando necesites controlar la navegación mediante JavaScript o usar routers de frameworks, establece variant="link" en los elementos para mantener el estilo de enlace correcto sin usar el atributo href. Esto es útil para aplicaciones SPA que manejan la navegación de forma programática.

Inicio Configuración Automatizaciones Crear Nueva 
<gstock-breadcrumb>
  <gstock-breadcrumb-item prefix="home" variant="link">Inicio</gstock-breadcrumb-item>
  <gstock-breadcrumb-item prefix="settings" variant="link">Configuración</gstock-breadcrumb-item>
  <gstock-breadcrumb-item prefix="zap" variant="link">Automatizaciones</gstock-breadcrumb-item>
  <gstock-breadcrumb-item prefix="plus">Crear Nueva</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 => {
      item.addEventListener('click', () => {
        console.log(`Click en: ${item.textContent.trim()}`);
      });
    });
  });
</script>

<style>
  gstock-breadcrumb-item[variant='link'] {
    cursor: pointer;
  }
</style>