Migas de Pan

Descripción general

Navegación de ruta de navegación en forma de flecha moderna y visualmente fácil de entender. Al usar clip-path, hemos logrado un hermoso diseño de flechas superpuestas usando solo CSS. Al calcular los márgenes negativos, creamos un borde (espacio) natural de 1 px entre cada elemento.

Código

<nav aria-label="Breadcrumb" style="max-width: 100%; overflow-x: auto; padding: 4px; box-sizing: border-box;">
  <ol class="breadcrumb">
    <li class="breadcrumb-item">
      <a href="#">
        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon-home">
          <path d="m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path>
          <polyline points="9 22 9 12 15 12 15 22"></polyline>
        </svg>
        Home
      </a>
    </li>
    <li class="breadcrumb-item"><a href="#">Products</a></li>
    <li class="breadcrumb-item"><a href="#">Electronics</a></li>
    <li class="breadcrumb-item active" aria-current="page">Smartphones</li>
  </ol>
</nav>

/* Contenedor para toda la navegación */
.breadcrumb {
  display: inline-flex;
  list-style: none;
  padding: 0;
  margin: 0;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background-color: #cbd5e1; /* Color del borde */
  border: 1px solid #cbd5e1; /* Outer frame */
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.breadcrumb-item {
  display: flex;
}

/* Common style for links and active state */
.breadcrumb-item a,
.breadcrumb-item.active {
  display: flex;
  align-items: center;
  padding: 12px 24px 12px 36px;
  background-color: #ffffff;
  color: #475569;
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  position: relative;
  transition: background-color 0.2s, color 0.2s;
  
  /* Crear forma de flecha con ruta de clip */
  clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 50%, calc(100% - 16px) 100%, 0 100%, 16px 50%);
  
  /* Create a 1px gap by overlapping 15px with previous element */
  margin-left: -15px; 
}

/* Icon spacing adjustment */
.breadcrumb-item a svg {
  margin-right: 6px;
}

/* First element shape and margin adjustment */
.breadcrumb-item:first-child a {
  padding-left: 20px;
  clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 50%, calc(100% - 16px) 100%, 0 100%);
  margin-left: 0;
}

/* Last element (current location) style */
.breadcrumb-item:last-child.active {
  padding-right: 24px;
  background-color: #3b82f6; /* Primary color */
  color: #ffffff;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 16px 50%);
}

/* Hover style */
.breadcrumb-item a:hover {
  background-color: #f8fafc;
  color: #0f172a;
}

/* Compatible con el modo oscuro */
@media (prefers-color-scheme: dark) {
  .breadcrumb {
    background-color: #334155; /* Dark mode border color */
    border-color: #334155;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3);
  }
  
  .breadcrumb-item a {
    background-color: #1e293b;
    color: #94a3b8;
  }
  
  .breadcrumb-item a:hover {
    background-color: #0f172a;
    color: #e2e8f0;
  }
  
  .breadcrumb-item:last-child.active {
    background-color: #3b82f6;
    color: #ffffff;
  }
}