Crie lindos breadcrumbs CSS com visualização em tempo real. Gere breadcrumbs com vários estilos, separadores e cores personalizáveis — tudo com código CSS pronto para copiar.
O Gerador de Breadcrumbs CSS é uma ferramenta online gratuita que cria lindos componentes de navegação breadcrumb usando CSS puro. Escolha entre vários estilos incluindo padrão, seta, pílula, sublinhado e minimalista. Personalize tipos de separadores, cores, raio da borda e efeitos de hover. Cada breadcrumb é gerado com código CSS limpo e pronto para copiar que funciona em todos os navegadores modernos. Nenhuma biblioteca JavaScript necessária.
Todos os breadcrumbs usam propriedades CSS3 padrão suportadas por navegadores modernos (Chrome, Firefox, Safari, Edge). Flexbox é usado para o layout que é bem suportado em todos os navegadores atuais.
Sim! O gerador cria um modelo com o número escolhido de itens. Simplesmente adicione mais elementos `<li>` ao HTML para incluir níveis adicionais de breadcrumb.
O HTML gerado usa elementos semânticos `<nav>` e `<ol>` com rótulos ARIA apropriados, tornando os breadcrumbs acessíveis para leitores de tela e tecnologias assistivas.
O gerador fornece separadores baseados em texto. Para usar fontes de ícones ou separadores SVG, substitua a propriedade `content` no pseudo-elemento `::before` pelo seu caractere de fonte de ícone ou use uma imagem de fundo.