Dê aos visitantes um caminho para seguir com breadcrumbs. Quando as pessoas veem onde estão no seu site e podem voltar para onde estavam, elas se sentem em casa e continuam explorando.
Adicionar breadcrumbs
Veja os designs de breadcrumbs e arraste o seu favorito para a página, no lugar em que ele é mais útil para os visitantes.
Para adicionar breadcrumbs:
Vá para o seu editor.
Clique em + Elementos.
Selecione Elementos.
Clique no ícone Menu e pesquisa
à esquerda.
Encontre Navegação de breadcrumbs e arraste um design para a página.
Personalizar breadcrumbs
Faça os breadcrumbs funcionarem para o seu site. Escolha quais páginas eles mostram, decida como a página inicial aparece e adicione um nome acessível para visitantes que usam tecnologia assistiva.
Para personalizar breadcrumbs:
- Vá para o seu editor.
- Clique no elemento breadcrumbs na página.
- Escolha como personalizá-lo:
Escolher o que aparece nos breadcrumbs
Decida quais páginas aparecem nos breadcrumbs e se há separadores entre elas.
Mostre ou oculte os separadores entre os breadcrumbs:
Clique no ícone Exibir elementos
na barra de ação.
Marque ou desmarque a caixa de seleção Separadores.
Escolha os níveis de hierarquia que você quer mostrar nos breadcrumbs:
Clique no ícone Todas as opções de design
na barra de ação.
Clique em Layout.
Selecione uma opção no dropdown Estado padrão:
Trilha completa
Ocultar página inicial
Ocultar página atual

Mostrar a página inicial como texto ou ícone
Mostre a página inicial pelo nome ou troque-a por um ícone que combine com o seu estilo.
Clique no ícone Todas as opções de design
na barra de ação.
Clique em Layout.
Selecione Texto ou Ícone no dropdown Exibir página inicial como.
(Se você selecionou ícone) Escolha o ícone que quer exibir:
Clique em Personalizar ícone na barra de ação.
Escolha o ícone que você quer:

Adicionar um nome acessível
Dê um nome aos breadcrumbs para visitantes que usam tecnologia assistiva.
-
Clique no ícone Configurações
na barra de ação.
-
Insira um nome no campo Nome acessível.

Ajustar o layout e o design
Ajuste como os breadcrumbs se encaixam na página e qual é a aparência deles. Altere o layout, modifique o espaçamento e estilize cada parte até que os breadcrumbs combinem com a sua marca.
Para ajustar o layout e o design:
- Vá para o seu editor.
- Clique no elemento breadcrumbs na página.
- Clique no ícone Todas as opções de design
na barra de ação.
- Escolha o que ajustar:
Ajustar o layout dos breadcrumbs
Controle como os itens são quebrados, onde ficam e quanto espaço têm.
Clique em Layout e ajuste os breadcrumbs:
Itens excedentes: escolha o que acontece com os itens que não cabem nos breadcrumbs: Ajustar ou Recolher (com elipses).
Alinhamento: clique no ícone Alinhar à esquerda, Centralizar, Alinhar à direita ou Justificar.
Aplicar direção do site: escolha se quer ou não aplicar a direção padrão do site (da esquerda para a direita ou da direita para a esquerda).
Clique em Espaçamento e arraste os sliders (ou insira um valor) para ajustar:
Preenchimento: o espaço ao redor dos breadcrumbs.
Espaço entre itens: o espaço horizontal entre os itens.
Espaço entre linhas: o espaço vertical entre as linhas, quando os breadcrumbs são quebrados.

Fazer o design dos breadcrumbs
Dê a cada parte dos breadcrumbs o próprio visual, do background aos itens em que os visitantes clicam.
-
Selecione a parte que você quer personalizar no dropdown na parte superior: Breadcrumbs, Itens ou Separadores.
-
(Somente itens) Selecione um estado: Normal, Hover ou Selecionado.
-
Faça o design da parte usando as opções disponíveis, como Cores de preenchimento, Texto, Bordas, Cantos e Sombra.
