EspañolBarra de etapas para site (stepper em HTML e CSS)
Escreva uma etapa por linha, escolha qual é a atual e o estilo. A prévia atualiza na hora e o código sai pronto para colar.
Mostre em que passo a pessoa está
Disponível em: 
Barra de etapas para site (stepper em HTML e CSS): para que serve
Gere a barra que mostra em que passo a pessoa está: carrinho, entrega, pagamento e confirmação; dados, endereço e revisão; pedido recebido, em preparo e a caminho. Escreva uma etapa por linha, escolha a atual, a direção e as cores. As etapas concluídas ganham um check e a linha entre elas acompanha o progresso.
O código usa uma lista ordenada, com aria-current="step" na etapa atual e um aviso escondido de concluída para leitores de tela. Na horizontal, em telas estreitas, a barra mostra só os números e o nome da etapa atual. Vem também uma função irPara(n) para trocar de etapa pelo JavaScript.
Como usar
- Escreva as etapas, uma por linha.
- Escolha a etapa atual, a direção e as cores.
- Copie o código ou baixe o HTML.
Quando usar
- Checkout da loja virtual.
- Formulário de cadastro em partes.
- Acompanhamento de pedido.
Perguntas frequentes
A barra de etapas é acessível?
Sim. Ela é uma lista ordenada (ol), então o leitor de tela anuncia o número de etapas e a posição de cada uma. A etapa atual leva aria-current="step", e as concluídas têm um texto escondido que diz concluída.
Funciona no celular?
No modo horizontal, em telas estreitas a barra mostra só os números e o nome da etapa atual, para não apertar o texto. O modo vertical funciona igual em qualquer tela e é bom para acompanhar pedidos.
Como mudar a etapa atual pelo JavaScript?
Troque as classes: as etapas anteriores ficam com feito, a atual com atual e aria-current="step", e as seguintes ficam sem classe. O código gerado traz uma função irPara(n) que faz isso.
É grátis mesmo?
Sim, 100% grátis. Sem cadastro, sem assinatura e sem limite de uso. Todas as ferramentas do Ferramentas123 são gratuitas e rodam direto no seu navegador.