Pular para o conteúdo principal

Componente Breadcrumb

📘 Modo de Uso​

O componente Breadcrumb é utilizado para indicar a posição atual do usuário dentro de uma hierarquia de páginas. Ele facilita a navegação contextual, permitindo retornar a níveis anteriores com apenas um clique.

Este componente melhora a usabilidade e a orientação espacial em sites e aplicativos com múltiplos níveis de navegação.

O template padrão possui três variações principais:

  • Simple: Blocos e separadores com background ghost (mais minimalista).
  • WithBlocks: Cada item está dentro de um bloco sólido.
  • Stacked: Elementos e separadores agrupados em um único bloco com background sólido.

🧩 Anatomia​

Anatomia

📋 Propriedades​

Propriedades

⌨️ Código​

  • opl.navigation.component.breadcrumb

🎨 Variantes​

Variações de Layout​

  • Simple
  • WithBlocks
  • Stacked

Separadores​

  • Chevron ( > )
  • Slash ( / )

Estados​

  • Default
  • Active (página atual, não clicável)
  • Hover/Focus (links intermediários interativos)

🛡️ Boas Práticas e Acessibilidade​

  • O último item do breadcrumb deve representar a página atual e não deve ser clicável.
  • Sempre forneça feedback visual de interação (hover/focus) nos links intermediários.
  • Use separadores consistentes (chevron ou slash), mas evite misturá-los no mesmo breadcrumb.
  • Mantenha os rótulos curtos e claros, representando exatamente o título da página.
  • Garanta contraste adequado para leitura em diferentes contextos de background (WCAG 2.1 – 1.4.3).
  • Para acessibilidade, utilize aria-label descrevendo o caminho completo, por exemplo: "Você está em: Início > Serviços > Detalhes".

📝 Observações​

  • O componente possui interações no protótipo. Use o modo Prototype para explorar.
  • Para adicionar mais páginas, desconecte a instância do agrupamento e manipule a quantidade de itens manualmente.
  • Cada elemento pode variar com as propriedades:
    • State
    • Style (hasBg)
    • Content (hasLeftIcon, hasRightIcon, hasText, isEllipsis, default)
  • O separador pode ser alternado entre Chevron e Slash.