Breadcrumb
- CSS/HTML (mds-styles): disponível
- Figma: ✅ — abrir Design System 2.0 ↗
- Tipo: Core
Definição Funcional
Seção intitulada “Definição Funcional”O Breadcrumb exibe o caminho hierárquico da página atual em relação à estrutura do sistema. Ele permite que o usuário compreenda sua localização e navegue rapidamente para níveis superiores.
Diretrizes de Comportamento
Seção intitulada “Diretrizes de Comportamento”- Hierarquia Visual: O último item da trilha (a página atual) deve estar em negrito ou em uma cor diferente para indicar onde o usuário está.
- Vá Direto ao Ponto: Use nomes curtos para as páginas. Se o título de uma página for “Gerenciamento de Inventário de Produtos Perecíveis”, no Breadcrumb use apenas “Inventário”.
- Interatividade: Todos os itens, exceto o último, devem ser links clicáveis.
- Uso de Reticências: Se o caminho for muito longo e comprometer o layout, oculte os níveis intermediários usando reticências (…) entre o primeiro e o último item.
- Separadores: Use símbolos neutros (como
/ou>) para separar os níveis.