MenuItem
- Angular:
[mdsMenuItem] - CSS/HTML (mds-styles): disponível
- Figma: ❌
- Tipo: Componente Angular
Definição Funcional
Seção intitulada “Definição Funcional”O MenuItem é o elemento base para a construção de menus contextuais (Dropdowns) e da Navegação Global do sistema. Ele organiza a hierarquia de funcionalidades por meio de variações de tamanho e recuo, permitindo ao usuário navegar entre módulos principais e seus respectivos submódulos de forma estruturada.
2. Diretrizes de Comportamento
Seção intitulada “2. Diretrizes de Comportamento”- Estados Visuais: Deve possuir estados claros de hover (fundo levemente alterado), focus (para acessibilidade via teclado) e active (para o item selecionado).
- Ícones de Apoio (Opcional): Utilize ícones à esquerda para acelerar o reconhecimento da ação.
- Exemplo: Ícone de
printpara Imprimir.
- Exemplo: Ícone de
- Menu Global (Módulo): O item de primeiro nível representa a vertical de negócio (ex: TMS, WMS). Deve ter maior peso visual, ícone representativo e ser o “pai” das subcategorias. Use Caixa de Título.
- Submódulos (Subnível): Itens aninhados que detalham as funcionalidades do módulo. Possuem um tamanho de fonte menor ou recuo horizontal (padding) para indicar subordinação. Use Caixa de Título.
- Estado Ativo: O MenuItem correspondente à página onde o usuário se encontra deve ter um destaque visual (cor de fundo ou borda lateral) para indicar a localização atual no mapa do sistema.
- Colapsável: Quando utilizado como módulo pai, o MenuItem deve possuir um indicador visual (seta/chevron) que sinalize a expansão ou recolhimento dos submódulos.