MenuItem

Tipo: Componente Angular

DesignersFigma Design System 2.0
Devs · HTML/CSSmds-stylesAinda não disponível
Devs · Angularmds-angular Storybook com inputs e outputs

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

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 print para Imprimir.
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.

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)

Seletor

[mdsMenuItem]

Item de menu

Inputs

Input	Tipo	Padrão	Descrição
`className`	`string`	`''`	Classe CSS customizada adicionada ao host
`label`	`string`	`''`	Label do item
`description`	`string`	—	Description do item
`icon`	`MdsIconAlias \| undefined`	`undefined`	Icone do item
`iconAdditionalClass`	`string`	`''`	Classe adicional para o icone
`size`	`MdsSizesSmall`	`'sm'`	tamanho do item
`loading`	`boolean`	`false`	tamanho do item
`disabled`	`boolean`	`false`	Desabilita o item
`notify`	`boolean`	`false`	Exibe marcador de notificação
`submenuTemplate`	`TemplateRef<unknown \| undefined`	`undefined`	Ajuste para item com submenu
`backButton`	`boolean`	`false`	Ajuste para item de voltar na lista do submenu
`rotateIcon`	`number \| undefined`	`undefined`	Rotaciona o icone do item
`active`	`boolean`	`false`	item ativo

Outputs

Output	Payload	Descrição
`itemClick`	`Event`	Output when the item is clicked
`openSubmenu`	`{ template: TemplateRef<unknown; element: HTMLElement…`	Output to open submenu
`submenuHover`	`{ template: TemplateRef<unknown; element: ElementRef…`	—
`submenuMouseLeave`	`{ level: number }`	—

MenuItem — Figma (Design System 2.0) ↗