🇯🇵 日本語 | 🇺🇸 English | 🇪🇸 Español | 🇵🇹 Português | 🇹🇭 ไทย | 🇨🇳 中文

Navegación por Pasos (Indicador)

Guía claramente a los usuarios a través de interfaces de varias etapas.

👀 Demostración en Vivo (Tipo Flecha)

① Entrada
② Confirmar
③ Completo

🧩 Demostración Avanzada (Formulario Vinculado a Pasos)

Formulario de Contacto

1
2
3
4

📋 Código Relacionado

HTML para Navegación por Pasos (Flechas)

<div class="step-nav">
  <div class="step completed">① Entrada</div>
  <div class="step current">② Confirmar</div>
  <div class="step">③ Completo</div>
</div>

HTML para Indicador de Pasos (Puntos)

<div class="step-indicator-dots">
  <div class="step-circle completed">1</div>
  <div class="step-circle active">2</div>
  <div class="step-circle">3</div>
</div>

📌 Navegación por Pasos con Indicador de Flecha

Esta demostración indica explícitamente el paso actual del usuario con "↑↑↑↑↑↑" y texto. Es útil para interfaces de varias etapas como formularios, desde la entrada hasta la finalización.

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    .step-nav {
      display: flex;
      justify-content: space-around;
      font-weight: bold;
      margin: 2rem 0;
      position: relative;
    }
    .step {
      color: gray;
      position: relative;
    }
    .step.current {
      color: #007bff;
    }
    .step.current::after {
  content: "   ↑↑↑↑↑↑\A    Estás aquí";
  white-space: pre;
  position: absolute;
  top: 2em;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.8rem;
  color: #007bff;
  pointer-events: none;
}
    .step.completed {
      color: green;
    }
    .step.completed::before {
      content: "✔ ";
      color: green;
    }
  </style>
</head>
<body>
  <div class="step-nav">
    <div class="step current">① Entrada</div>
    <div class="step">② Confirmar</div>
    <div class="step">③ Completo</div>
  </div>
  <br><br>
  <div style="text-align: center;">
    <button onclick="nextStep()">Siguiente ▶</button>
  </div>
  <script>
    function nextStep() {
      const steps = document.querySelectorAll(".step-nav .step");
      const current = document.querySelector(".step.current");
      if (!current) return;
      current.classList.remove("current");
      current.classList.add("completed");
      const next = current.nextElementSibling;
      if (next) {
        next.classList.add("current");
      }
    }
  </script>
</body>
</html>

📘 Casos de Uso y Beneficios de esta Plantilla

  • El progreso es obvio a simple vista en las interfaces basadas en pasos.
  • Los usuarios pueden entender intuitivamente dónde se encuentran.
  • Ideal para formularios, flujos de compra y encuestas.
  • Mejora la UX con flechas y cambios de color.
  • Permite el control de pasos con JavaScript (extensible).

🧩 UI de Pasos Avanzada: Vinculación con Gestión de Estado y Control de Bloques

Esta plantilla ayuda a evitar que los usuarios se pierdan y reduce las tasas de abandono en formularios y flujos de compra al clarificar visualmente el progreso.

Un uso más avanzado es alternar bloques de contenido para cada paso. Combinado con `display: none` de JavaScript, puedes crear una UX donde solo se muestra el formulario del paso actual, y el contenido cambia al avanzar.

Por ejemplo:

  • Paso de Entrada: Mostrar los campos del formulario
  • Paso de Confirmación: Mostrar la pantalla de confirmación
  • Paso de Finalización: Mostrar el mensaje de finalización

Al sincronizar el paso con el contenido, puedes desarrollar una UI más dinámica e intuitiva.

Además, al considerar la integración con frameworks como Vue o React, se facilita el control de la validación y la navegación hacia atrás para cada paso mediante la gestión de estado, lo que lo hace aplicable para construir SPAs (Single Page Applications) prácticas.

También puedes crear un formulario de contacto como el de abajo

Formulario de Contacto

1
2
3

Información Básica



  <div class="unique-step-form-container" style="font-family: Arial, sans-serif; max-width: 600px; margin: 20px auto; padding: 20px; border: 1px solid #eee; border-radius: 8px; background: #fafafa;">
    <h2 style="text-align: center; color: #333; margin-bottom: 25px;">Formulario de Contacto</h2>
    
    <div class="unique-step-indicator" style="display: flex; justify-content: center; margin-bottom: 25px;">
        <div class="unique-step-circle active" data-unique-step="1" style="width: 30px; height: 30px; border-radius: 50%; background-color: #4CAF50; color: white; display: flex; align-items: center; justify-content: center; margin: 0 10px;">1</div>
        <div class="unique-step-circle" data-unique-step="2" style="width: 30px; height: 30px; border-radius: 50%; background-color: #ddd; display: flex; align-items: center; justify-content: center; margin: 0 10px;">2</div>
        <div class="unique-step-circle" data-unique-step="3" style="width: 30px; height: 30px; border-radius: 50%; background-color: #ddd; display: flex; align-items: center; justify-content: center; margin: 0 10px;">3</div>
    </div>
    
    <div class="unique-step-container" style="position: relative; min-height: 300px;">
        <!-- Step 1: Basic Information -->
        <div class="unique-step active" id="unique-step1" style="display: block; padding: 20px; border: 1px solid #ddd; border-radius: 5px; background-color: #f9f9f9; animation: uniqueFadeIn 0.5s;">
            <h3 style="margin-top: 0; color: #444;">Información Básica</h3>
            <div class="unique-form-group" style="margin-bottom: 15px;">
                <label for="unique-name" style="display: block; margin-bottom: 5px; font-weight: bold;">Nombre</label>
                <input type="text" id="unique-name" required style="width: 100%; padding: 8px; border: 1px solid #ddd; border-radius: 4px;">
            </div>
            <div class="unique-form-group" style="margin-bottom: 15px;">
                <label for="unique-email" style="display: block; margin-bottom: 5px; font-weight: bold;">Correo Electrónico</label>
                <input type="email" id="unique-email" required style="width: 100%; padding: 8px; border: 1px solid #ddd; border-radius: 4px;">
            </div>
            <div class="unique-btn-group" style="margin-top: 20px; display: flex; justify-content: space-between;">
                <button disabled class="unique-btn-prev" style="padding: 10px 20px; border: none; border-radius: 4px; cursor: pointer; background-color: #f0f0f0; color: #999;">Anterior</button>
                <button class="unique-btn-next" onclick="uniqueNextStep(1)" style="padding: 10px 20px; border: none; border-radius: 4px; cursor: pointer; background-color: #4CAF50; color: white;">Siguiente</button>
            </div>
        </div>
        
        <!-- Step 2: Detailed Information -->
        <div class="unique-step" id="unique-step2" style="display: none; padding: 20px; border: 1px solid #ddd; border-radius: 5px; background-color: #f9f9f9;">
            <h3 style="margin-top: 0; color: #444;">Información Detallada</h3>
            <div class="unique-form-group" style="margin-bottom: 15px;">
                <label for="unique-subject" style="display: block; margin-bottom: 5px; font-weight: bold;">Asunto</label>
                <input type="text" id="unique-subject" required style="width: 100%; padding: 8px; border: 1px solid #ddd; border-radius: 4px;">
            </div>
            <div class="unique-form-group" style="margin-bottom: 15px;">
                <label for="unique-message" style="display: block; margin-bottom: 5px; font-weight: bold;">Mensaje</label>
                <textarea id="unique-message" rows="5" required style="width: 100%; padding: 8px; border: 1px solid #ddd; border-radius: 4px;"></textarea>
            </div>
            <div class="unique-btn-group" style="margin-top: 20px; display: flex; justify-content: space-between;">
                <button class="unique-btn-prev" onclick="uniquePrevStep(2)" style="padding: 10px 20px; border: none; border-radius: 4px; cursor: pointer; background-color: #f0f0f0;">Anterior</button>
                <button class="unique-btn-next" onclick="uniqueNextStep(2)" style="padding: 10px 20px; border: none; border-radius: 4px; cursor: pointer; background-color: #4CAF50; color: white;">Siguiente</button>
            </div>
        </div>
        
        <!-- Step 3: Confirmation -->
        <div class="unique-step" id="unique-step3" style="display: none; padding: 20px; border: 1px solid #ddd; border-radius: 5px; background-color: #f9f9f9;">
            <h3 style="margin-top: 0; color: #444;">Confirmación</h3>
            <div id="unique-confirmation-content" style="margin-bottom: 20px;">
                <!-- Confirmation content is dynamically displayed here -->
            </div>
            <div class="unique-btn-group" style="margin-top: 20px; display: flex; justify-content: space-between;">
                <button class="unique-btn-prev" onclick="uniquePrevStep(3)" style="padding: 10px 20px; border: none; border-radius: 4px; cursor: pointer; background-color: #f0f0f0;">Anterior</button>
                <button class="unique-btn-next" onclick="uniqueSubmitForm()" style="padding: 10px 20px; border: none; border-radius: 4px; cursor: pointer; background-color: #4CAF50; color: white;">Enviar</button>
            </div>
        </div>
        
        <!-- Step 4: Completion -->
        <div class="unique-step" id="unique-step4" style="display: none; padding: 20px; border: 1px solid #ddd; border-radius: 5px; background-color: #f9f9f9; text-align: center;">
            <h3 style="margin-top: 0; color: #444;">Envío Completo</h3>
            <p style="color: #4CAF50; font-weight: bold;">Gracias por su consulta</p>
            <p>Le responderemos en 3 días hábiles.</p>
        </div>
    </div>
</div>

<script>
// Scope definition
(function() {
  let uniqueCurrentStep = 1;
  const uniqueTotalSteps = 4;

  window.uniqueNextStep = function(step) {
    if (step === 1) {
      const name = document.getElementById('unique-name').value;
      const email = document.getElementById('unique-email').value;
      if (!name || !email) {
        alert('Por favor, rellene los campos obligatorios');
        return;
      }
    } else if (step === 2) {
      const subject = document.getElementById('unique-subject').value;
      const message = document.getElementById('unique-message').value;
      if (!subject || !message) {
        alert('Por favor, rellene los campos obligatorios');
        return;
      }
    }

    if (step === 2) {
      uniqueUpdateConfirmation();
    }

    document.getElementById(`unique-step${step}`).style.display = 'none';
    document.getElementById(`unique-step${step+1}`).style.display = 'block';
    document.getElementById(`unique-step${step+1}`).style.animation = 'uniqueFadeIn 0.5s';

    document.querySelector(`.unique-step-circle[data-unique-step="${step}"]`).style.backgroundColor = '#ddd';
    document.querySelector(`.unique-step-circle[data-unique-step="${step}"]`).style.color = '#333';
    document.querySelector(`.unique-step-circle[data-unique-step="${step+1}"]`).style.backgroundColor = '#4CAF50';
    document.querySelector(`.unique-step-circle[data-unique-step="${step+1}"]`).style.color = 'white';

    uniqueCurrentStep = step + 1;
  };

  window.uniquePrevStep = function(step) {
    document.getElementById(`unique-step${step}`).style.display = 'none';
    document.getElementById(`unique-step${step-1}`).style.display = 'block';
    document.getElementById(`unique-step${step-1}`).style.animation = 'uniqueFadeIn 0.5s';

    document.querySelector(`.unique-step-circle[data-unique-step="${step}"]`).style.backgroundColor = '#ddd';
    document.querySelector(`.unique-step-circle[data-unique-step="${step}"]`).style.color = '#333';
    document.querySelector(`.unique-step-circle[data-unique-step="${step-1}"]`).style.backgroundColor = '#4CAF50';
    document.querySelector(`.unique-step-circle[data-unique-step="${step-1}"]`).style.color = 'white';

    uniqueCurrentStep = step - 1;
  };

  function uniqueUpdateConfirmation() {
    const name = document.getElementById('unique-name').value;
    const email = document.getElementById('unique-email').value;
    const subject = document.getElementById('unique-subject').value;
    const message = document.getElementById('unique-message').value;

    const content = `
      <div style="margin-bottom: 15px;">
        <h4 style="margin-bottom: 10px; color: #555;">Información Básica</h4>
        <p style="margin: 5px 0;"><strong>Nombre:</strong> ${name}</p>
        <p style="margin: 5px 0;"><strong>Correo Electrónico:</strong> ${email}</p>
      </div>
      <div style="margin-bottom: 15px;">
        <h4 style="margin-bottom: 10px; color: #555;">Información Detallada</h4>
        <p style="margin: 5px 0;"><strong>Asunto:</strong> ${subject}</p>
        <p style="margin: 5px 0 10px;"><strong>Mensaje:</strong></p>
        <div style="background:#fff; padding:10px; border:1px solid #eee; border-radius:4px; margin-bottom: 15px;">${message.replace(/\n/g, '<br>')}</div>
      </div>
      <p style="margin-top:20px; color:#666; font-size: 0.9em;">Por favor, revise la información y presione el botón de enviar.</p>
    `;

    document.getElementById('unique-confirmation-content').innerHTML = content;
  }

  window.uniqueSubmitForm = function() {
    document.getElementById('unique-step3').style.display = 'none';
    document.getElementById('unique-step4').style.display = 'block';
    document.getElementById('unique-step4').style.animation = 'uniqueFadeIn 0.5s';

    document.querySelector(`.unique-step-circle[data-unique-step="3"]`).style.backgroundColor = '#ddd';
    document.querySelector(`.unique-step-circle[data-unique-step="4"]`).style.backgroundColor = '#4CAF50';
    document.querySelector(`.unique-step-circle[data-unique-step="4"]`).style.color = 'white';

    uniqueCurrentStep = 4;
  };

  const style = document.createElement('style');
  style.textContent = '@keyframes uniqueFadeIn {from { opacity: 0; } to { opacity: 1; }}';
  document.head.appendChild(style);
})();
</script>
</section>

Plantillas Relacionadas