C oleção de grátis Breadcrumb HTML e CSS exemplos de código de navegação: simples, responsivo, multilinha, recolhidoetc. Atualização da coleção de fevereiro de 2018. 3 novos itens.

Sobre o código

CSS simples.

Sobre o código

Sinta-se à vontade para personalizá-lo do seu jeito. Cores, tamanhos, sombras, bordas, etc. Feito com Bootstrap.

Sobre o código

Breadcrumbs com reticências "inteligentes" (Flex)

Brinque com o tamanho do navegador para ver como eles se comportam quando não há espaço para eles.

Sobre o código

Este exemplo mostra o que acontece quando um usuário se aproxima do botão Voltar. A localização atual se expande e permite que o usuário navegue para quase qualquer outro lugar no curso, tendo um impacto mínimo no espaço.

Breadcrumbs com propriedades customizadas CSS como API.
Feito por Stas Melnikov
15 de junho de 2017

Setas de migalhas de pão CSS puras de várias linhas adaptáveis.
Feito por Glynn Smith
30 de maio de 2017

GIF de demonstração: breadcrumbs

Breadcrumbs de HTML e CSS.
Feito por dany santos
15 de julho de 2016

Breadcrumb do Material Design, rastreador de progresso.
Feito por shyam chen
30 de julho de 2015

Uma lista de breadcrumbs reduzida para mostrar apenas o texto de visualização para todos, exceto a página atual, com o texto completo mostrado em foco / foco.
Feito por Skye
4 de março de 2015

Breadcrumbs responsivos de CSS puro.
Feito por Oliver Knoblich
2 de abril de 2014

CSS e CSS3 evoluíram muito ultimamente e, portanto, os estilos antigos que usam imagens de fundo para obter a forma desejada não são mais necessários.

Neste artigo, vou mostrar como fazer breadcrumbs simples em seu site usando HTML e CSS. Você também pode visitar sites interessantes, algo pode ser útil. Recentemente fiz uma seleção.

No final, obtemos o seguinte resultado:

Anteriormente, para desenhar uma seta transparente entre os dois blocos, uma imagem transparente era usada no fundo. Agora, esse problema pode ser resolvido usando apenas CSS.

1. Quadro de migalhas

Migalhas de pão

Primeiro, vamos criar uma lista com marcadores -

elementos Pão ralado será adicionado adicionando um novo
.

2. Adicionar CSS

Agora vamos escrever algum CSS para que fique assim:

#crumbs ul li a (display: block; float: left; height: 50px; background: # 3498db; text-align: center; padding: 30px 40px 0 40px; position: relative; margin: 0 10px 0 0; font-size : 20px; decoração de texto: nenhum; cor: #fff;)
Esses estilos adicionam:
1. link visualizar como um bloco e azul
2. centralize o texto e torne-o branco
3. suave preenchimento para exibir o bloco corretamente verticalmente
4. redefine outros estilos para links de decoração de texto: nenhum
Atenção: posição: relativa adicionado para conter posteriormente todas as unidades internas com posição: absoluta.

3. Crie um efeito de seta

#crumbs ul li a: after (content: ""; border-top: 40px vermelho sólido; border-bottom: 40px vermelho sólido; border-left: 40px solid blue; position: absoluto; right: -40px; top: 0; )
Para criar setas, vamos usar a propriedade : depois deque permite criar um elemento adicional após o pai. Adicionar a ele posição: absoluta- para isso nós fizemos positivo: relativo para links manter absoluto propriedade dentro do link e manipulá-la como quisermos.

A seta será renderizada usando bordas. O exemplo usa vermelho propositalmente, mas usará transparente... Mais longe fronteira será colocado no lugar usando posição: absoluta.

4. Adicione transparência com borda

mudança vermelho em fronteira em transparentepara criar um efeito transparente.
Borda superior: 40px transparente sólido; borda inferior: 40px transparente sólido; borda esquerda: 40px sólido # 3498db;
5. Adicione uma flecha atrás

#crumbs ul li a: before (content: ""; border-top: 40px sólido transparente; border-bottom: 40px sólido transparente; border-left: 40px solid # d4f2ff; position: absoluto; left: 0; top: 0; )
Usando o mesmo princípio da terceira etapa, você pode criar um triângulo transparente atrás do bloco. Cor fronteira deve ser definida como a cor de fundo do site para criar um efeito de transparência.

Preenchimento: 30px 40px 0 80px;
5. Adicionar novos elementos

Adicionando novo
aumente a profundidade da farinha de rosca.
- 1
- Dois
- Três
- Quatro
- Cinco
6. Primeiro e último

Para criar um efeito de arredondamento para o primeiro e último item na localização atual, usaremos : primeiro filho e : último filho.
#crumbs ul li: first-child a (border-top-left-radius: 10px; border-bottom-left-radius: 10px;) #crumbs ul li: first-child a: before (display: none;) #crumbs ul li: last-child a (padding-right: 80px; border-top-right-radius: 10px; border-bottom-right-radius: 10px;) #crumbs ul li: last-child a: after (display: none ;)
7. Adicione um efeito de foco

#crumbs ul li a: hover (background: # fa5ba5;) #crumbs ul li a: hover: after (border-left-color: # fa5ba5;)
Também não se esqueça de adicionar raio de fronteira ao passar o mouse sobre o primeiro e o último item da localização atual.

Isso é tudo. Se você tiver alguma dúvida - escreva comentários e compartilhe o artigo se você gostou!
Como fazer breadcrumbs em um site com usando CSS por bologer

Em sites com muitas páginas, a cadeia de navegação ( navegação breadcrumb) pode ajudar significativamente os visitantes a navegar na estrutura hierárquica dos documentos e indicar a localização atual dos usuários no site. Do ponto de vista da usabilidade, breadcrumbs podem reduzir o número de etapas que um visitante executa para encontrar o caminho até o nível superior da página.

O que é breadcrumb?

Corrente de navegação (Menu de navegação, "Migalhas de pão", eng. Migalhas de pão) - um elemento de navegação do site, que é um caminho através do site desde sua "raiz" até a página atual na qual o usuário está localizado.

O nome "Breadcrumbs" é uma referência irónica ao conto de fadas alemão "Hansel and Gretel", em que as crianças, quando foram levadas para a floresta pela segunda vez, não conseguiram encontrar o caminho de volta, pois desta vez deixaram para trás migalhas de pão em vez de pequenas pedras , mais tarde bicado por pássaros da floresta.

Normalmente, você pode ver a localização atual em sites com muito conteúdo organizado de maneira hierárquica. A forma mais simples, quando os breadcrumbs são apresentados na forma de links de texto localizados horizontalmente e caracteres separados (\u003e - "mais"), que indica o nível desta página em relação a outras páginas.

Quando você deve usar breadcrumbs?

Use breadcrumbs para grandes sites e sites com organização de página hierárquica.

Você não deve usar breadcrumbs para sites irmãos que não têm nenhuma hierarquia ou agrupamento lógico.

Uma ótima maneira de determinar se um site se beneficiaria de uma localização atual é construir um mapa do site ou diagrama que represente a arquitetura de navegação do site e, em seguida, analisar se a localização atual torna mais fácil para o usuário navegar dentro e entre as categorias.

A navegação hierárquica deve ser vista como função adicionale não deve substituir um menu de navegação primário eficaz. É um esquema de navegação secundário que permite aos usuários estabelecer onde estão e onde estão caminho alternativo navegação no site.

Tipos de breadcrumbs

Existem três principaistipo de "migalhas de pão".

Com base na localização

Com base na localização, a localização atual mostra ao usuário onde ele está na hierarquia do site.Eles geralmente são usados \u200b\u200bpara estruturas de navegação que possuem vários níveis (geralmente mais de dois níveis).No exemplo abaixo (deSitePoint ), cada link de texto da página à esquerda está um nível acima.

Baseado em propriedades

A localização atual baseada em propriedades reflete os atributos de uma página específica.

Baseado em caminho

Eles mostram o caminho que o usuário percorreu até a página atual. Este caminho é dinâmico. A mesma página pode ter endereços diferentes.

Benefícios do uso de breadcrumbs

Eles podem ajudar o usuário

Breadcrumbs são usados \u200b\u200bprincipalmente para fornecer aos usuários ferramentas de navegação adicionais.Em grandes sites de vários níveis, ao oferecer visualizações do caminho percorrido, você pode fornecer ao usuário uma transição bastante fácil para as categorias de nível superior.

Reduz o número de cliques ou ações para retornar às páginas de nível superior

Em vez de usar o botão Voltar do navegador ou a navegação principal de um site, os usuários podem navegar de volta para as categorias principais com trilhas, enquanto fazem menos cliques.

Geralmente não obstrui a tela

Geralmente são horizontais e, portanto, não ocupam muito espaço na página.

Reduza a taxa de rejeição

Breadcrumbs podem encorajar novos visitantes a navegar pelo resto do site. Por exemplo, um usuário vai para uma página por meio de uma pesquisa do Google, vê as categorias que estão localizadas acima e pode estar interessado. Isso, por sua vez, reduz a taxa de rejeição do site.

Erros ao usar breadcrumbs

As migalhas de pão são fáceis de usar. Mas antes de implementá-los no site, é preciso considerar alguns erros que devem ser evitados.

Usando breadcrumbs quando você não precisa

Um erro comum é usar migalhas de pão quando não há benefício.

No exemplo acima, podemos ver muitas opções de navegação colocadas próximas o suficiente umas das outras: navegação primária, breadcrumbs e navegação secundária.

Usando breadcrumbs como navegação primária

Conforme observado anteriormente, o breadcrumbs deve ser usado como um auxílio adicional à navegação.

Usando breadcrumbs quando as páginas têm várias categorias

As trilhas de navegação são lineares, portanto, podem ser difíceis de usar se suas páginas não puderem ser categorizadas em categorias claras.A decisão de usar breadcrumbs depende muito de como você configura seu site de hierarquia.Em níveis de página baixos, o uso de breadcrumbs é ineficaz, impreciso e confuso para o usuário.

Projeto breadcrumbs

Ao projetar cadeias de navegação, algumas perguntas podem surgir. Por exemplo:

Que personagem você deve usar para separar links?

O símbolo geralmente aceito e mais reconhecível para separar hiperlinks em breadcrumbs é o símbolo maior que - (\u003e).

Você também pode usar aspas para indicar o canto direito (") e barras (/).

A escolha depende do próprio site e do tipo de rede que você está usando.Por exemplo, se os links em breadcrumbs não tiverem um relacionamento hierárquico entre si, o uso do símbolo maior que\u003e pode não transmitir seu significado com precisão.

O que eles deveriam ser?

Você não quer que sua localização atual domine a página.Eles devem ser usados \u200b\u200bcomo ajuda adicional para os usuários (por conveniência), portanto, seu tamanho também deve ser adequado e transmitir essa função aos usuários corretamente - eles devem ser menores ou menos visíveis do que a navegação do menu principal.

Uma boa regra para determinar a distância percorrida é quenão deveria seja o primeiro elemento que chame a atenção do usuário na página.

Onde as migalhas de pão devem ser localizadas?

As trilhas de navegação geralmente são exibidas na parte superior da página, abaixo do menu de navegação principal, se você estiver usando um menu horizontal.

Estatisticas

Abaixo estão as estatísticas coletadas em maio de 2002 para 75 sites de comércio eletrônico líderes.

Orientação de correntes

95% - horizontal

5% vertical

Separador entre elementos (para cadeias horizontais)

Exemplos de uso de breadcrumbs em web design

Agora que cobrimos quem usa breadcrumbs, como, quando e por que, podemos dar uma olhada em alguns exemplos de seu uso em sites.

Uso clássico de breadcrumbs

Usando outros símbolos

Bela e original seleção de breadcrumbs, que são feitos em flat design, usando CSS3, em uma paleta de tons diferente. Claro, a visibilidade da navegação, a forma dos botões, auxilia tanto o usuário do site quanto os visitantes, isso é navegar no recurso da Internet, onde você pode clicar nas frases-chave que serão exibidas para nós. Mas também se encaixa perfeitamente com o estilo, cada vez mais você pode notar que alguns estão instalando no módulo do fórum, sem falar no design moderno.
Se você tem, como você pensa, muito material, então aqui é recomendado conectar esta funcionalidade. Não haverá estilo de lista para evitar o ponto preto da lista ou outro estilo que seja o padrão. Uma vez que o categoriza e módulos incondicionalmente, começando com pagina iniciale tudo isso é apresentado de uma forma elegante. Neste material, você vê uma seleção feita em um estilo semelhante, em um estilo plano.
Em termos de forma, são completamente diferentes, que ninguém vai precisar nem editar para caber no seu desenho, pois vai caber perfeitamente nele. Agora usaremos o código css para fazer a primeira âncora da lista e definir a última âncora filha para torná-la padrão, de modo que o tringle não apareça na primeira âncora filha para a âncora esquerda e a última filha para o lado direito.
Fazendo migalhas de pão

1. Em um tom amarelo claro:
2. Paleta de luzes com tons verdes:
3. Na cor carmesim
4. Feito em uma paleta azul:
Esta será uma lista simples e direta com fundo e preenchimento e alguns outros estilos. Depois disso, vou criar uma estrutura triangular no lado direito de cada âncora de lista usando CSS, brincando com as propriedades do broder.
Como você pode ver na versão demo, quando colocamos o mouse sobre qualquer âncora de lista nas migalhas de pão, dá um efeito, o que significa que você visitou ou está nesta seção.
Ou podemos imaginar seu efeito ao torná-lo ativo como migalhas de pão ativas. Você pode dizer que essas migalhas de pão css são apenas migalhas de pão, porque só estarei usando css e css3 para fazer essas migalhas.
Primeiros passos com a instalação:
- № 1
- № 1
- № 3
- № 4
- № 5
- Seção 1
- Seção 2
- Seção 3
- Seção 4
- Seção 5
- ZOR 1
- ZOR 2
- ZOR 3
- ZOR 4
- ZOR 5
- Clique 1
- Clique 2
- Clique 3
- Clique 4
- Clique 5
CSS
Não haverá estilo de lista para evitar o ponto preto da lista ou outro estilo que seja o padrão. Cada div embutido será list-inline para torná-lo uma lista horizontal usando css display: list-inline.
# breadcrumb-isanchogives1 (
alinhamento de texto: centro;
margem superior: 30px;
}
# breadcrumb-isanchogives1 ul (
estilo de lista: nenhum;
display: inline-table;
}
# breadcrumb-isanchogives1 ul li (
display: inline;
}
# breadcrumb-isanchogives1 ul li a (
display: bloco;
flutuar: esquerda;
altura: 50px;
plano de fundo: # ffd928;
alinhamento de texto: centro;
preenchimento: 30px 40px 0 80px;
posição: relativa;
margem: 0 10px 0 0;
Tamanho da fonte: 20px;
decoração de texto: nenhum;
cor: #fff;
}
# breadcrumb-isanchogives1 ul li a: after (
conteúdo: "";

borda esquerda: 40px sólido # ffd928;
índice z: 1;
# breadcrumb-isanchogives1 ul li a: before (
conteúdo: "";
borda superior: 40px transparente sólido;
borda inferior: 40px transparente sólido;

}
# breadcrumb-isanchogives1 ul li: primeiro filho a (
}
# breadcrumb-isanchogives1 ul li: primeiro filho a: before (
Mostrar nenhum;
}
# breadcrumb-isanchogives1 ul li: last-child a (
padding-right: 80px;
}
# breadcrumb-isanchogives1 ul li: last-child a: after (
Mostrar nenhum;
}
# breadcrumb-isanchogives1 ul li a: hover (
plano de fundo: # ff9a2d;
}
# breadcrumb-isanchogives1 ul li a.wesove-readcrum (
plano de fundo: # ff9a2d;
}
# breadcrumb-isanchogives1 ul li a: hover: after (
border-left-color: # ff9a2d;
}
# breadcrumb-isanchogives1 ul li a.wesove-readcrum: after (
border-left-color: # ff9a2d;
}
# breadcrumb-isanchogives2 (
alinhamento de texto: centro;
margem superior: 30px;
}
# breadcrumb-isanchogives2 ul (
estilo de lista: nenhum;
display: inline-table;
}
# breadcrumb-isanchogives2 ul li (
display: inline;
}
# breadcrumb-isanchogives2 ul li a (
display: bloco;
flutuar: esquerda;
altura: 50px;
plano de fundo: # 56e9ae;
alinhamento de texto: centro;
preenchimento: 30px 40px 0 80px;
posição: relativa;
margem: 0 10px 0 0;
Tamanho da fonte: 20px;
decoração de texto: nenhum;
cor: #fff;
}
# breadcrumb-isanchogives2 ul li a: after (
conteúdo: "";
borda superior: 40px transparente sólido;
borda inferior: 40px transparente sólido;
borda esquerda: 40px sólido # 56e9ae;
posição: absoluta; direita: -40px; topo: 0;
índice z: 1;
# breadcrumb-isanchogives2 ul li a: before (
conteúdo: "";
borda superior: 40px transparente sólido;
borda inferior: 40px transparente sólido;
borda esquerda: 40px sólido # f2f2f2;
posição: absoluta; esquerda: 0; topo: 0;
}
# breadcrumb-isanchogives2 ul li: primeiro filho a (
}
# breadcrumb-isanchogives2 ul li: last-child a (
padding-right: 80px;
}
# breadcrumb-isanchogives2 ul li a: hover (
plano de fundo: # 49c593;
}
# breadcrumb-isanchogives2 ul li a.wesove-readcrum (
plano de fundo: # 49c593;
}
# breadcrumb-isanchogives2 ul li a: hover: after (
cor da borda esquerda: # 49c593;
}
# breadcrumb-isanchogives2 ul li a.wesove-readcrum: after (
cor da borda esquerda: # 49c593;
}
# breadcrumb-isanchogives3 (
alinhamento de texto: centro;
margem superior: 30px;
}
# breadcrumb-isanchogives3 ul (
estilo de lista: nenhum;
display: inline-table;
}
# breadcrumb-isanchogives3 ul li (
display: inline;
}
# breadcrumb-isanchogives3 ul li a (
display: bloco;
flutuar: esquerda;
altura: 50px;
plano de fundo: # ff818b;
alinhamento de texto: centro;
preenchimento: 30px 40px 0 80px;
posição: relativa;
margem: 0 10px 0 0;
Tamanho da fonte: 20px;
decoração de texto: nenhum;
cor: #fff;
}
# breadcrumb-isanchogives3 ul li a: after (
conteúdo: "";
altura: 80px;
largura: 40px;
plano de fundo: # ff818b;
posição: absoluta; direita: -40px; topo: 0;
índice z: 1;
# breadcrumb-isanchogives3 ul li a: before (
conteúdo: "";
altura: 80px;
largura: 40px;
border-radius: 0px 40px 40px 0px;
plano de fundo: # f2f2f2;
posição: absoluta; esquerda: 0; topo: 0;
}
# breadcrumb-isanchogives3 ul li: primeiro filho a (
border-top-left-radius: 10px; border-bottom-left-radius: 10px;
}
# breadcrumb-isanchogives3 ul li: primeiro filho a: before (
Mostrar nenhum;
}
# breadcrumb-isanchogives3 ul li: last-child a (
padding-right: 80px;
border-top-right-radius: 10px; border-bottom-right-radius: 10px;
}
# breadcrumb-isanchogives3 ul li: last-child a: after (
Mostrar nenhum;
}
# breadcrumb-isanchogives3 ul li a: hover (
plano de fundo: # ea606b;
}
# breadcrumb-isanchogives3 ul li a.wesove-readcrum (
plano de fundo: # ea606b;
}
# breadcrumb-isanchogives3 ul li a: hover: after (
plano de fundo: # ea606b;
}
# breadcrumb-isanchogives3 ul li a.wesove-readcrum: after (
plano de fundo: # ea606b;
}
# breadcrumb-isanchogives4 (
alinhamento de texto: centro;
margem superior: 30px;
}
# breadcrumb-isanchogives4 ul (
estilo de lista: nenhum;
display: inline-table;
}
# breadcrumb-isanchogives4 ul li (
display: inline;
}
# breadcrumb-isanchogives4 ul li a (
display: bloco;
flutuar: esquerda;
altura: 50px;
fundo: # 2b97cc;
alinhamento de texto: centro;
preenchimento: 30px 40px 0 80px;
posição: relativa;
margem: 0 10px 0 0;
Tamanho da fonte: 20px;
decoração de texto: nenhum;
cor: #fff;
}
# breadcrumb-isanchogives4 ul li a: after (
conteúdo: "";
altura: 80px;
largura: 40px;
border-radius: 0px 40px 40px 0px;
plano de fundo: # 2b97cc;
posição: absoluta; direita: -40px; topo: 0;
índice z: 1;
# breadcrumb-isanchogives4 ul li a: before (
conteúdo: "";
altura: 80px;
largura: 40px;
plano de fundo: # f2f2f2;
border-radius: 0px 40px 40px 0px;
posição: absoluta; esquerda: 0; topo: 0;
}
# breadcrumb-isanchogives4 ul li: primeiro filho a (
border-top-left-radius: 0px; border-bottom-left-radius: 0px;
}
# breadcrumb-isanchogives4 ul li: last-child a (
padding-right: 80px;
border-top-right-radius: 0px; border-bottom-right-radius: 0px;
}
# breadcrumb-isanchogives4 ul li a: hover (
plano de fundo: # 207ca8;
}
# breadcrumb-isanchogives4 ul li a.wesove-readcrum (
plano de fundo: # 207ca8;
}
# breadcrumb-isanchogives4 ul li a: hover: after (
plano de fundo: # 207ca8;
}
# breadcrumb-isanchogives4 ul li a.wesove-readcrum: after (
plano de fundo: # 207ca8;
}

Em primeiro lugar, crie sua estrutura html baseada nas tags div e ul li. Div contém um ID, cada ID conterá um estilo diferente na folha de estilo para representar um design separado. Onde usamos numeração como um, dois, três, quatro.
Esses identificadores possuem a mesma estrutura interna, separados por estilos diferentes de acordo com seu identificador.

Saudações. Breadcrumbs são um bloco útil em qualquer site porque permitem que você veja o caminho completo para a página em que você está atualmente. E hoje vou lhe dizer como estilizar breadcrumbs em css? Não para criar, mas para emitir. Em geral, há muitas opções, irei abordar duas.

Opção de design simples - sem imagem

O código html imita breadcrumbs. Que seja assim:

casa
Título
Página

Basicamente, você pode apenas colocar um colchete angular, mas não será capaz de controlar a largura da linha. Eu sugiro fazer de forma diferente, usando transformações. Este código fará isso:

Cumbs1 a: não (: último filho): depois (
conteúdo: "";
display: bloco embutido;
largura: 5px;
altura: 5px;
borda superior: preto sólido de 2 pixels;
borda direita: preto sólido de 2 pixels;
transformar: girar (45deg);
margem esquerda: 5px
}
.cumbs1 a: hover (
cor laranja;
}

Talvez estes sejam seletores complicados para você, então verifique este artigo. O ponto principal é o seguinte: usar um pseudo-elemento (sobre o que é e como usar -) depois adiciona nosso separador ao final de cada link. É formado por dois quadros e uma rotação de 45 graus. Adicione também uma cor laranja aos links flutuantes. Isso, em princípio, é todo o design.

Outra opção de design - com uma imagem

Nesse caso, as migalhas de pão ficarão mais interessantes, assim:

Para isso, precisamos de uma imagem e alguns estilos em css:

Cumbs2 (
fundo: laranja;
largura máxima: 250px;
}
.cumbs2 a (
display: bloco embutido;
preenchimento: 7px 0;
cor: # 000;
}
.cumbs2 a: não (: último filho) (
fundo: url (arrow.png) sem repetição 100% 50%;
padding-right: 33px;
}

Não forneço o código html, porque é o mesmo que no primeiro caso. Por onde começar aqui? Primeiro, definimos a cor de fundo e o tamanho de todo o bloco de breadcrumbs. A seguir, definimos os estilos gerais para links - tipo bloco inline, recuos superior e inferior e cor.

A próxima etapa é a mais interessante - usando a não pseudoclasse, selecionamos todos os links no bloco, exceto o último, e definimos o background image arrow.png para eles, sem repetir, com a posição do fundo no meio da altura e no final ao longo da largura de um link. Os primeiros dois links precisam de preenchimento à direita apenas para colocar a imagem lá. Se não fosse por ele, a imagem atropelaria o texto.

Como funciona a não pseudo classe, acho que você adivinhou - ela seleciona todos os elementos, exceto o que está indicado entre parênteses. No mínimo, no futuro escreverei outra pequena nota sobre como trabalhar com a pseudo classe: not, onde tudo ficará mais claro. Bem, aqui estão 2 opções simples para decorar migalhas de pão que você pode usar para fazer suas próprias.