Contexto
Abas organizam conteúdos relacionados em painéis alternáveis, mostrando um painel por vez. Elas funcionam quando as opções pertencem ao mesmo contexto e têm importância semelhante, mas a pessoa não precisa ver tudo simultaneamente.
Abas não são apenas uma decoração visual. Ao esconder painéis, elas reduzem o que fica visível e aumentam o custo de descobrir ou comparar informações. Por isso, o componente deve ser escolhido pela relação entre os conteúdos e pela tarefa, não apenas pela quantidade de texto.
Use abas para dividir conteúdos relacionados em grupos curtos, previsíveis e alternáveis dentro do mesmo contexto. A pessoa deve conseguir entender o que cada aba contém, escolher uma opção e retornar às demais sem perder sua posição ou o que já fez.
Comece pela relação entre os conteúdos. Cada aba deve representar uma variação clara do mesmo assunto, objeto, área de trabalho ou tarefa. Se os grupos não tiverem relação direta, use uma navegação própria, links ou páginas separadas.
Mantenha todas as abas no mesmo nível de importância. Não misture uma seção principal com uma configuração secundária, uma ação ou uma etapa obrigatória. Abas servem para alternar entre visões equivalentes, não para representar uma sequência que precisa ser seguida.
Prefira poucos grupos e escreva rótulos curtos, específicos e fáceis de prever. Quando a lista crescer, reavalie a estrutura: uma página aberta, um acordeão ou outra forma de navegação pode tornar o conteúdo mais fácil de encontrar.
Abra inicialmente a visão mais útil para a maioria das pessoas ou a necessária para começar a tarefa. Informações críticas para concluir uma ação não devem ficar escondidas apenas porque não estão na primeira aba. Se for importante comparar conteúdos, mostre-os juntos ou escolha uma solução que não obrigue a pessoa a alternar e memorizar informações.
Deixe clara a relação entre cada aba e seu painel. A aba ativa precisa ter um destaque visual perceptível, e o painel exibido deve mudar de forma consistente quando a pessoa alternar entre as opções. Preserve o estado do conteúdo quando isso for relevante, para que a troca de aba não apague dados nem interrompa a tarefa.
Defina o comportamento de ativação de acordo com o tempo de carregamento. A ativação automática ao mover o foco funciona quando o painel aparece sem atraso perceptível. Se houver carregamento, consulta ou atualização demorada, permita que a pessoa percorra as abas e confirme a escolha com Enter ou Espaço.
No celular, não empilhe várias linhas de abas nem corte rótulos importantes. Use rolagem horizontal com uma indicação de que existem opções fora da área visível ou escolha outro padrão quando a navegação deixar de ser compreensível. Evite também colocar abas dentro de abas, porque duas camadas tornam mais difícil entender onde a pessoa está.
Antes de concluir, valide se as pessoas entendem os rótulos, percebem que existem outros painéis e conseguem voltar ao conteúdo anterior sem perder o estado. Compare a solução com página aberta, acordeão, filtro e navegação entre páginas. Nem toda faixa horizontal é uma aba: filtros, carrosséis, paginação e indicadores de progresso representam relações diferentes.
Em resumo: use abas quando os conteúdos forem relacionados, equivalentes e independentes o suficiente para serem vistos um de cada vez. Quando a pessoa precisar comparar informações, seguir etapas ou enxergar todo o conteúdo, comece avaliando outra solução.
Base da recomendação
NN/g e Carbon convergem sobre o uso de abas para conteúdos relacionados no mesmo contexto, com rótulos curtos, poucos grupos, painel inicial útil e sem exigir comparação entre painéis. Material diferencia abas de paginação e carrossel. W3C define a estrutura semântica e o comportamento de teclado. GOV.BR orienta rótulos breves, navegação em telas pequenas e o não aninhamento de abas. A Baymard acrescenta uma ressalva específica para páginas de produto: esconder seções essenciais atrás de abas horizontais pode contrariar a expectativa de encontrar informações ao rolar a página. Portanto, a recomendação é forte para conteúdo relacionado, mas continua dependente da tarefa e do contexto.
Porque isso importa?
Abas tornam uma interface mais compacta, mas também escondem conteúdo. A pessoa precisa inferir o que existe em cada painel pelo rótulo e lembrar do que viu ao alternar entre eles.
Quando os grupos são relacionados e os rótulos são claros, o componente reduz a sobrecarga visual e mantém a pessoa no mesmo contexto. Quando os painéis são diferentes, numerosos ou essenciais para comparação, a alternância aumenta o esforço e pode fazer informações importantes passarem despercebidas.
O comportamento técnico interfere diretamente na experiência. Foco pouco visível, ativação lenta, abas que desaparecem no mobile ou estados comunicados apenas por cor transformam um padrão simples em uma barreira.
Quando usar?
- Configurações relacionadas do mesmo objeto.
- Visões equivalentes de um painel ou dashboard.
- Conteúdos do mesmo assunto divididos em poucas categorias.
- Detalhes complementares que não precisam aparecer juntos.
- Áreas de trabalho em que alternar mantém o contexto.
- Painéis que podem ser carregados sem perda de estado.
Quando evitar?
- Etapas obrigatórias de um processo.
- Comparação simultânea entre informações.
- Conteúdo crítico que precisa estar visível.
- Listas longas de destinos diferentes.
- Filtros ou modos do mesmo conjunto de dados.
- Paginação, carrossel ou indicador de progresso.
- Rótulos longos ou grupos sem relação clara.
- Abas dentro de abas.
Recomendações
Faça
- Agrupe conteúdos relacionados.
- Use rótulos curtos.
- Mostre a aba mais útil.
- Destaque a aba ativa.
- Conecte aba e painel.
- Defina a ativação.
- Preserve o estado.
- Teste no mobile.
Evite
- Esconder informação crítica.
- Usar para etapas.
- Usar para filtros.
- Forçar comparação por alternância.
- Criar muitas abas.
- Empilhar várias linhas.
- Aninhar abas.
- Depender só de cor.
