M29 — Breadcrumbs
Barra de navegação que mostra ao visitante em que ponto do site se encontra, com o caminho completo desde a página inicial até à página atual. Permite regressar rapidamente às páginas superiores com um clique.
| Campo | Valor |
|---|---|
| Módulo | M29 — Breadcrumbs |
| Estado | Rascunho |
| Figma Desktop | Abrir no Figma |
| Figma Mobile | Abrir no Figma |
| Zoho Task | Abrir no Zoho |
| Criada | 2026-04-21 |
| Aprovada | — |
| Aprovada por | — |
Screenshots de Referência
Section titled “Screenshots de Referência”Desktop (1440px)
Section titled “Desktop (1440px)”
Mobile (375px)
Section titled “Mobile (375px)”Abrir screenshot mobile em nova janela
Descrição Geral
Section titled “Descrição Geral”As Breadcrumbs (também chamadas “migalhas de pão”) são uma barra horizontal que apresenta o caminho de navegação do visitante dentro do site. Começa pela página inicial do hotel e termina na página onde o visitante se encontra, passando pelas páginas intermédias da hierarquia.
Cada nível é separado por uma barra diagonal (”/”). Os níveis anteriores à página atual são ligações clicáveis que permitem regressar rapidamente; o último item (a página atual) aparece em destaque a negrito e não é clicável.
Este módulo tipicamente aparece no topo de páginas interiores, logo abaixo do menu principal, ajudando o visitante a perceber onde está e a explorar facilmente secções próximas. Ajuda ainda a melhorar a posição do site nos motores de busca, porque mostra de forma clara a estrutura das páginas.
Variantes
Section titled “Variantes”Variante 1 — Fundo claro
Section titled “Variante 1 — Fundo claro”Como visitante, quero ver o caminho de navegação com fundo suave sobre páginas de conteúdo, para perceber a minha localização sem que a barra distraia do conteúdo principal.
Elementos visíveis:
- Fundo bege/suave na largura total do ecrã
- Texto em cor escura (tom acastanhado ou do tema do hotel)
- Ligações dos níveis anteriores em peso normal
- Página atual (último item) em negrito
- Separador ”/” entre cada nível
Critérios de Aceitação:
- A barra ocupa toda a largura do ecrã
- O texto é perfeitamente legível sobre o fundo claro
- A página atual (último item) aparece a negrito
- As restantes ligações têm peso normal e são clicáveis
- Cada nível está separado pelo símbolo ”/”
- Ao clicar numa ligação, o visitante é levado para essa página
- A página atual não é clicável
Variante 2 — Fundo escuro
Section titled “Variante 2 — Fundo escuro”Como visitante, quero ver o caminho de navegação com fundo escuro sobre secções visualmente fortes, para manter a coerência visual com o cabeçalho ou heros escuros acima.
Elementos visíveis:
- Fundo escuro (tom profundo do tema do hotel) na largura total do ecrã
- Texto em cor clara (branco ou bege claro)
- Página atual em negrito
- Separador ”/” entre cada nível
Critérios de Aceitação:
- A barra ocupa toda a largura do ecrã
- O texto claro é legível sobre o fundo escuro
- A página atual aparece a negrito
- As ligações são clicáveis
- O contraste entre fundo e texto cumpre os requisitos de acessibilidade
Variante 3 — Dois níveis
Section titled “Variante 3 — Dois níveis”Como visitante, quero que as breadcrumbs funcionem com apenas dois níveis (por exemplo, “Início / Contactos”), para navegar em páginas de primeiro nível sob a página inicial.
Elementos visíveis:
- Ligação para a página inicial (clicável)
- Separador ”/”
- Página atual em negrito
Critérios de Aceitação:
- A barra apresenta corretamente apenas dois itens
- O primeiro item é clicável e o segundo aparece em destaque
- O espaçamento é equilibrado, sem aparentar estar vazia
Variante 4 — Muitos níveis
Section titled “Variante 4 — Muitos níveis”Como visitante, quero que as breadcrumbs funcionem com vários níveis de profundidade (por exemplo, 5 ou mais páginas), para navegar em hierarquias mais complexas sem perder a referência.
Elementos visíveis:
- Vários itens clicáveis separados por ”/”
- Página atual sempre em destaque no final
- Em ecrãs pequenos, os itens podem passar para linha seguinte
Critérios de Aceitação:
- Todos os níveis são apresentados pela ordem correta
- Em ecrã estreito, a lista quebra para linhas adicionais sem cortar texto
- Nenhum texto causa scroll horizontal
Interações do Utilizador
Section titled “Interações do Utilizador”| Interação | Descrição |
|---|---|
| Clicar numa ligação anterior | Leva o visitante para a página correspondente desse nível da hierarquia |
| Passar o rato sobre uma ligação | A ligação fica sublinhada para indicar que é clicável |
| Selecionar uma ligação com o teclado (Tab) | A ligação fica visualmente destacada com contorno para indicar que está selecionada |
| Premir Enter numa ligação selecionada | Navega para a página dessa ligação |
A página atual (último item) não é clicável — apenas informa ao visitante em que página está.
Elementos
Section titled “Elementos”Conteúdos que alimentam este módulo:
| Elemento | Tipo | Obrigatório | Descrição |
|---|---|---|---|
| Lista de níveis de navegação | Texto + Ligação | Sim | Gerada automaticamente a partir da estrutura de páginas do site. Cada nível tem um nome (texto visível) e uma ligação (URL da página). |
| Nome da página atual | Texto | Sim | Apresentado como último item, em negrito. Corresponde ao título ou nome da página onde o visitante se encontra. |
Nota: A lista de níveis é gerada automaticamente com base na hierarquia de páginas do backoffice. O editor não precisa de a preencher manualmente — sempre que uma página existe dentro de outra, as breadcrumbs são atualizadas automaticamente.
Se existirem menos de dois níveis (por exemplo, só a página inicial), o módulo não é apresentado.
Opções de Configuração
Section titled “Opções de Configuração”Opções disponíveis no backoffice para personalizar o comportamento e aspeto do módulo:
| Opção | Valores possíveis | Valor padrão | Descrição |
|---|---|---|---|
| Tipo de fundo | Claro / Escuro | Claro | Escolhe entre fundo claro (tom suave) ou fundo escuro (tom profundo) para combinar com o que está acima e abaixo da barra na página |
| Margem superior | -100 a 100 pixels | Sem margem | Ajusta o espaço vertical acima da barra |
| Margem inferior | -100 a 100 pixels | Sem margem | Ajusta o espaço vertical abaixo da barra |
| Espaço interno superior | -100 a 100 pixels | Padrão | Ajusta o espaço interno acima do texto |
| Espaço interno inferior | -100 a 100 pixels | Padrão | Ajusta o espaço interno abaixo do texto |
| Ativar/Desativar | Ativo / Inativo | Ativo | Permite esconder o módulo sem o apagar |
Comportamento Responsive
Section titled “Comportamento Responsive”| Elemento | Ecrã grande (computador) | Ecrã pequeno (telemóvel) |
|---|---|---|
| Barra completa | Ocupa toda a largura, com espaço interno maior nas laterais | Ocupa toda a largura, com espaço interno menor nas laterais |
| Lista de níveis | Uma única linha, alinhada à esquerda | Uma única linha se couber; quando não cabe, os itens passam para linha seguinte |
| Texto | Tamanho normal de leitura | Tamanho normal de leitura (sem redução) |
| Separador ”/“ | Entre cada par de itens | Entre cada par de itens, mantendo o mesmo espaçamento |
Em todas as larguras de ecrã, a barra nunca causa scroll horizontal — quando o conteúdo é demasiado longo, os itens quebram para linha seguinte.
Estados Visuais
Section titled “Estados Visuais”| Estado | Descrição |
|---|---|
| Inicial | A barra aparece fixa no topo da área de conteúdo, logo abaixo do menu principal |
| Ao passar o rato sobre uma ligação | A ligação fica sublinhada, indicando que é clicável |
| Ao selecionar uma ligação com o teclado | Aparece um contorno à volta da ligação para indicar que está selecionada |
| Página atual | Apresenta-se sempre a negrito e não é clicável |
| Com apenas um nível | A barra não é apresentada (precisa de pelo menos dois níveis para fazer sentido) |
| Com muitos níveis | Os itens continuam a ser apresentados por ordem; em ecrã estreito, quebram para linha seguinte sem cortar texto |
| Texto muito longo num nível | O texto não é cortado; se necessário, ocupa mais espaço horizontal |
Acessibilidade
Section titled “Acessibilidade”- A barra é identificada como uma secção de navegação para leitores de ecrã
- A página atual é sinalizada como tal para que os leitores de ecrã a anunciem corretamente ao visitante
- Pode ser navegada apenas com o teclado (tecla Tab para avançar entre ligações, Enter para ativar)
- Cada ligação é reconhecida como tal por leitores de ecrã e tem texto legível
- Os separadores ”/” são escondidos de leitores de ecrã para não interferir com a leitura
- Quando uma ligação está selecionada pelo teclado, tem um contorno visível de alto contraste
- O contraste de cores (texto sobre fundo) cumpre os requisitos de acessibilidade visual em todos os temas, tanto no fundo claro como no escuro
O módulo adapta-se visualmente a cada hotel: as cores de fundo (claro e escuro) e as cores de texto seguem a identidade visual do hotel, assim como a tipografia do corpo de texto.
Os 8 hotéis suportados:
- Savoy Signature
- Savoy Palace
- Royal Savoy
- Saccharum
- The Reserve
- Calheta Beach
- Gardens
- Hotel Next
Exemplos por hotel
Section titled “Exemplos por hotel”Savoy Palace
Saccharum
Calheta Beach
Hotel Next
Savoy Signature
Changelog
Section titled “Changelog”| Data | Estado | Descrição |
|---|---|---|
| 2026-04-21 | Rascunho | Versão inicial criada a partir do Figma |
| 2026-04-21 | Publicada | Publicada no Docmost (nova página) |