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

Navegação por Etapas (Indicador)

Guia claro para o usuário em interfaces com várias etapas.

👀 Demonstração ao Vivo (Tipo Seta)

① Entrada
② Revisão
③ Conclusão

🧩 Demonstração Avançada (Formulário com Etapas)

Formulário de Contato

1
2
3
4

📋 Código Relacionado

HTML da Navegação por Etapas (Seta)

<div class="step-nav">
  <div class="step completed">① Entrada</div>
  <div class="step current">② Revisão</div>
  <div class="step">③ Conclusão</div>
</div>

HTML do Indicador de Etapas (Pontos)

<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>

📌 Exibir Posição Atual com Setas

Esta demonstração usa "↑↑↑↑↑↑" para indicar visualmente onde o usuário está. Ideal para formulários de múltiplas etapas ou fluxos de envio.

<!DOCTYPE html>
<html lang="pt">
<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　 　Você está aqui";
  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">② Revisão</div>
    <div class="step">③ Conclusão</div>
  </div>
  <br><br>
  <div style="text-align: center;">
    <button onclick="nextStep()">Próximo ▶</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 e Benefícios

  • Mostra claramente o progresso em interfaces por etapas
  • Usuário entende facilmente onde está no processo
  • Ideal para formulários, compras e pesquisas
  • Melhora a experiência com setas e mudança de cores
  • Expansível com controle via JavaScript

🧩 Evolução da UI em Etapas: Integração com Gerenciamento de Estado e Controle de Blocos

Este modelo torna o progresso das etapas visualmente claro, ajudando a evitar confusão do usuário e reduzindo abandono no meio de formulários ou fluxos de compra.

Como uma aplicação mais avançada, é possível alternar a exibição/ocultação de conteúdo por etapa. Combinando com JavaScript e `display: none`, você pode exibir apenas o formulário da etapa atual, proporcionando uma experiência de usuário (UX) dinâmica que muda conforme o progresso.

Por exemplo:

  • Etapa de Entrada: Mostrar campos de formulário
  • Etapa de Confirmação: Mostrar os dados inseridos
  • Etapa de Conclusão: Mostrar mensagem final

Sincronizando as etapas com seu conteúdo, é possível criar uma UI mais dinâmica e intuitiva.

Além disso, ao integrar com frameworks como Vue ou React, o gerenciamento de estado permite validações por etapa, função de voltar, e facilita a construção de SPA (Single Page Application) práticas.

Você também pode criar um formulário de contato como o exemplo abaixo

Formulário de Contato

1
2
3

Informações Básicas



  <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;">Formulário de Contato</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;">
        <!-- Etapa 1: Informações Básicas -->
        <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;">Informações Básicas</h3>
            <div class="unique-form-group" style="margin-bottom: 15px;">
                <label for="unique-name" style="display: block; margin-bottom: 5px; font-weight: bold;">Nome</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;">Endereço de e‑mail</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;">Próximo</button>
            </div>
        </div>
        
        <!-- Etapa 2: Informações Detalhadas -->
        <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;">Informações Detalhadas</h3>
            <div class="unique-form-group" style="margin-bottom: 15px;">
                <label for="unique-subject" style="display: block; margin-bottom: 5px; font-weight: bold;">Assunto</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;">Mensagem</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;">Próximo</button>
            </div>
                    </div>
        
        <!-- Etapa 3: Confirmação -->
        <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;">Confirmação</h3>
            <div id="unique-confirmation-content" style="margin-bottom: 20px;">
                <!-- O conteúdo de confirmação será exibido aqui dinamicamente -->
            </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>
        
        <!-- Etapa 4: Conclusão -->
        <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;">Envio Concluído</h3>
            <p style="color: #4CAF50; font-weight: bold;">Obrigado pelo seu contato.</p>
            <p>Respondemos em até 3 dias úteis.</p>
        </div>
    </div>
</div>

<script>
// Define o escopo
(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, preencha os campos obrigatórios');
        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, preencha os campos obrigatórios');
        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;">Informações Básicas</h4>
        <p style="margin: 5px 0;"><strong>Nome:</strong> ${name}</p>
        <p style="margin: 5px 0;"><strong>E-mail:</strong> ${email}</p>
      </div>
      <div style="margin-bottom: 15px;">
        <h4 style="margin-bottom: 10px; color: #555;">Informações Detalhadas</h4>
        <p style="margin: 5px 0;"><strong>Assunto:</strong> ${subject}</p>
        <p style="margin: 5px 0 10px;"><strong>Mensagem:</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 as informações antes de clicar no botão 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>

Modelos Relacionados