Breadcrumb
Tipo: Core
- DesignersFigma Design System 2.0
- Devs · HTML/CSSmds-stylesAinda não disponível
- Devs · Angularmds-angular Storybook com inputs e outputs
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.
Para desenvolvedores
Seção intitulada “Para desenvolvedores”Tudo abaixo é lido do código (stories, SCSS e componentes Angular) a cada npm run docs:sync — se algo estiver diferente do que você vê no projeto, o código é quem manda.
Angular (mds-angular)
Seção intitulada “Angular (mds-angular)”Seletor
Seção intitulada “Seletor”mds-breadcrumbs
| Input | Tipo | Padrão | Descrição |
|---|---|---|---|
className |
string |
'' |
Classe CSS customizada adicionada ao host |
items (obrigatório) |
MdsBreadcrumbItem[] |
— | Itens do breadcrumb |
size |
MdsSizes |
'sm' |
Tamanho dos itens |
maxItems |
number |
4 |
Quantidade máxima de itens visíveis antes de colapsar |
separator |
MdsIconAlias |
'proximo' |
Ícone divisor entre os itens |