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 são uma barra horizontal que apresenta o caminho de navegação do visitante dentro do site. Fica posicionada dentro da grid da página — respeita as margens laterais. Tem altura fixa de 68px em todos os breakpoints.
Cada nível é separado por um separador visual ( ”/”). Os níveis intermédios com nomes longos são truncados ao fim de 10 caracteres, com reticências (ex: “Lorem ipsu…”), para manter a barra compacta. O último item (página atual) nunca é truncado — apresenta-se sempre completo e a negrito, não é clicável.
Os níveis anteriores à página atual são ligações clicáveis que permitem regressar rapidamente.
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 cor A
Section titled “Variante 1 — Fundo cor A”Como visitante, quero ver o caminho de navegação com fundo A 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 cor A na largura total do ecrã
- Texto em cor A
- 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 cor B
Section titled “Variante 2 — Fundo cor B”Como visitante, quero ver o caminho de navegação com fundo B sobre secções visualmente fortes, para manter a coerência visual.
Elementos visíveis:
- Fundo Cor B ( tema do hotel) na largura total do ecrã
- Texto em cor B
- 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 é legível sobre o fundo
- 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 | A / B | A | 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 |
| Ativar/Desativar | Ativo / Inativo | Ativo | Permite ativar ou desativar o módulo sem o apagar — quando inativo, o módulo deixa de aparecer no site mas toda a configuração é mantida. |
Comportamento Responsive
Section titled “Comportamento Responsive”| Elemento | Ecrã grande (computador) | Ecrã pequeno (telemóvel) |
|---|---|---|
| Largura | Dentro da grid, respeitando margens laterais | Idem |
| Altura | 68px fixos | Automática |
| Lista de níveis | Uma linha, alinhada à esquerda | Uma linha; quando não cabe, os itens quebram para linha seguinte |
| Truncagem | Itens intermédios usar max-width + CSS ellipsis | Igual |
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 sites suportados:
• Savoy Palace
• Saccharum
• Calheta Beach
• Hotel Next
• Savoy Signature (site do grupo)
• Gardens (por desenvolver)
• The Reserve (por desenvolver)
• Royal Savoy (por desenvolver)
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-05-14 | Revisão Design + Tech | Análise de Liliana Moreira e Rui Rosa comparando as recomendações de FA |
| 2026-05-11 | Revisão Functional Analyst | Análise e recomendações da equipa de Análise Funcional. |
| 2026-05-05 | Validação Design | Atualizado e validado por Liliana Moreira |
| 2026-04-21 | Rascunho | Versão inicial criada a partir do Figma |