Menu Lateral / Sidebar

Tipo: Core

• DesignersFigma ↗Design System 2.0
• Devs · HTML/CSSmds-styles ↗Storybook com classes e exemplos
• Devs · Angularmds-angular ↗Storybook com inputs e outputs

Definição Funcional

o Menu/Sidebar é o eixo principal de navegação do sistema, organizando módulos e funcionalidades em uma estrutura hierárquica. Ela permite o acesso rápido às camadas de negócio e alterna o contexto operacional do usuário através de estados fixos ou flutuantes. )

Variações e Comportamentos

• Menu Estático (Expandido): Fixado à esquerda, exibe ícones e rótulos. Ideal para resoluções maiores, permitindo navegação rápida entre módulos.
• Menu Estático (Compacto): Exibe apenas ícones para otimizar a área de trabalho. Utilize Tooltips em cada ícone para garantir a clareza.
• Menu Flutuante: Utilizado em dispositivos móveis ou telas reduzidas. Sobrepõe o conteúdo e inclui um cabeçalho com a logo e o botão de fechamento.

**Anatomia e Escrita **

Elemento	Sugestão UX Writing (Conciso)	Justificativa
Seletor de Contexto	Unidade de Negócio	Define o escopo operacional e as permissões de dados.
Módulos (Nível 1)	Menu Principal	Estrutura de navegação entre as grandes áreas do sistema.
Seções (Submenu)	Navegação Local	Organiza as páginas internas de um módulo de forma hierárquica.
Rodapé do Menu	Informações do Sistema	Exibe a versão do software e créditos de desenvolvimento.

Exemplos de Escrita (Dos & Don’ts)

Contexto	Estilo Prolixo (Original)	Estilo UX (Correto)
Item de Menu	Ver o Dashboard de indicadores	Dashboard
Submenu	Clique para ver os tipos de Sider	Sider

Anatomia

1. Seletor Superior: Alternador de Contexto

(Na teoria de Kalbach: Componente de Contexto e Filtro Global)

• Termo para a Documentação: Alternador de Contexto
• Definição: Elemento persistente de nível mais alto que define o contexto de dados sob o qual toda a sessão opera. Não é uma navegação entre páginas em si, mas um modificador do escopo informacional.
• O que entra nesta área:
  • Seleção de Unidade de Negócio, Filial, Empresa ou Workspace ativo.
  • Identificador imediato de “Onde/Em qual contexto estou operando?”.
• Regra de Uso: Qualquer alteração feita aqui atualiza dinamicamente as permissões, os dados carregados na tela atual e a disponibilidade dos módulos na navegação principal.

2. Navegação Global e Navegação Local Combinadas

(Na teoria de Kalbach: Navegação Estrutural Hierárquica) O menu lateral reúne os módulos principais e suas subpáginas em árvore/acordeão, sendo a junção da Navegação Global com a Navegação Local:

2.1. Nível 1 (Módulos fechados): Navegação Global (Global Navigation)

• Termo para a Documentação: Navegação Global
• Definição: Pontos de acesso de nível superior presentes e consistentes em toda a aplicação. Define a amplitude e a fronteira macro do sistema, permitindo que o usuário alterne entre as grandes áreas/produtos da plataforma a qualquer momento.
• O que entra nesta área:
  • Módulos macro do negócio (ex.: Planejamento, Dock Scheduling, Crossdocking, Tracking, Acordos).
  • Telas de visão agregada (ex.: Dashboards).

2.2. Nível 2 (Sub-itens abertos): Navegação Local (Local Navigation)

• Termo para a Documentação: Navegação Local (ou Subnavegação de Módulo)
• Definição: Navegação restrita ao escopo do módulo selecionado na navegação global. Fornece acesso às páginas, fluxos e ferramentas filhas imediatas daquele assunto.
• O que entra nesta área:
  • Páginas e fluxos pertencentes estritamente àquele módulo (ex.: dentro de Dock Scheduling: Agendamentos, Gestão de pátio, Painel de carregamentos, Docas).
• Regra de Uso: Nunca misturar páginas de módulos diferentes; a navegação local deve retratar fielmente a hierarquia de conteúdo subordinada ao nó pai.

3. Navegação Utilitária do Sistema / Navegação Suplementar

(Na teoria de Kalbach: Utility Navigation aplicada à Administração)

• Termo para a Documentação: Navegação Utilitária do Sistema (ou Navegação Suplementar de Configuração)
• Definição: Conjunto de links que dão suporte à operação e manutenção da ferramenta, mas não fazem parte do fluxo de trabalho core/operacional direto do negócio. Fica isolada visualmente para não competir com as tarefas primárias de rotina.
• O que entra nesta área:
  • Parâmetros do sistema, configurações de conta/empresa e ferramentas de bastidor.
  • Exemplo da imagem: Automação, Preferências, Integrações, Cadastros gerais.
• Regra de Uso: Deve ficar ancorada na base da área lateral, separada da lista operacional de módulos, servindo como suporte técnico e administrativo.

4. Bloco Superior Direito: Navegação Utilitária Global

(Na teoria de Kalbach: Utility Navigation pura de topo)

• Termo para a Documentação: Navegação Utilitária Global (ou Ações Utilitárias)
• Definição: Recursos transversais que auxiliam o usuário independentemente de qual página ou módulo ele esteja visualizando. São funções de suporte, comunicação, auxílio cognitivo ou troca de estado de usuário.
• O que entra nesta área:
  • Ajuda e Suporte (FAQ, documentação, chamados).
  • Comunicação e Alertas (mensagens internas, sineta de notificações).
  • Assistentes globais (robô/chat com IA).
  • Alternador de produtos do ecossistema (app switcher / waffle icon).
  • Identificação e menu do perfil de usuário.
• Regra de Uso: Deve ser fixa e onipresente no cabeçalho superior, garantindo acesso instantâneo com um clique sem tirar o foco da página atual.

Resumo para a Tabela de Arquitetura no Design System

Área Destacada	Conceito segundo Kalbach	Classificação para Documentação	Papel Informacional
Topo esquerdo	Scope Control / Context Switcher	Controle de Escopo	Delimita os dados da conta/empresa ativa.
Meio esquerdo (Módulos)	Global Navigation	Navegação Global	Define os macro-módulos e produtos da plataforma.
Meio esquerdo (Sub-itens)	Local Navigation	Navegação Local	Detalha as páginas pertencentes a um módulo ativo.
Base esquerda	Utility / Supplementary Navigation	Navegação Utilitária do Sistema	Configurações, integrações e parâmetros da aplicação.
Topo direito	Global Utility Navigation	Navegação Utilitária Global	Ferramentas de apoio geral: ajuda, avisos, IA e perfil.
)

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.

HTML/CSS (mds-styles)

Exemplo

Story Opened do Storybook:

<div class="mds-menu mds-menu--default mds-menu--opened" id="menubrand" style="height: 100vh;">
  <div class="mds-menu-business p-v--sm p-h--md">
    <div class="d-flex gap--sm  align-items-center">
      <span class="mds-avatar mds-avatar--sm mds-avatar--blue">TR</span>
      <span class="mds-menu-business__info">
        <span class="helper-text text-ellipsis">Unidade de Negócio</span>
        <span class="caption text-ellipsis" title="Matriz">Matriz</span>
      </span>
    </div>
  </div>
  <nav class="mds-menu__nav">
    <ul class="mds-menu__nav__list">
      <li>
        <a href="#" class="mds-menu-item mds-menu-item--active">
          <i class="mds-icon d-inline-flex align-items-center justify-content-center mds-menu-item__icon mds-menu-item__icon--icon mds-icon--md" width="24" height="24" data-lucide="boxes"></i>
          <span class="mds-menu-item__content">
            <span class="mds-menu-item__text text-ellipsis"> Cargas </span>
          </span>
        </a>
      </li>
      <li>
        <a href="#" class="mds-menu-item ">
          <i class="mds-icon d-inline-flex align-items-center justify-content-center mds-menu-item__icon mds-menu-item__icon--icon mds-icon--md" width="24" height="24" data-lucide="truck"></i>
          <span class="mds-menu-item__content">
            <span class="mds-menu-item__text text-ellipsis"> Veículos </span>
          </span>
        </a>
      </li>
      <li>
        <details class="mds-menu__group flex-grow-1 no-select">
          <summary class="mds-menu-item mds-menu-item--md mds-menu-item--active">
            <i class="mds-icon d-inline-flex align-items-center justify-content-center mds-menu-item__icon mds-menu-item__icon--icon mds-icon--md" width="24" height="24" data-lucide="truck"></i>
            <div class="mds-menu-item__content d-flex flex-column flex-grow-1">
              <span class="mds-menu-item__text text-ellipsis"> Modulo de exemplo </span>
              <span class="mds-menu-item__subtext text-ellipsis">  </span>
            </div>
            <i class="mds-icon d-inline-flex align-items-center justify-content-center mds-menu__group__toggle mds-icon--md" data-lucide="chevron-down"></i>
          </summary>
          <ul class="mds-menu__group__content">
            <li>
              <a href="#" role="menuitem" class="mds-menu-item mds-menu-item--sm">
                <i class="mds-icon d-inline-flex align-items-center justify-content-center mds-menu-item__icon mds-menu-item__icon--icon mds-icon--sm" width="16" height="16" data-lucide="boxes"></i>
                <div class="mds-menu-item__content d-flex flex-column flex-grow-1">
                  <span class="mds-menu-item__text text-ellipsis"> Alert Bar </span>
                </div>
  <!-- … -->

Variações e opções

Opções do painel de controles do Storybook — escolha um valor lá para ver o resultado ao vivo. As classes CSS correspondentes estão na lista abaixo.

Opção	Valores	Padrão no exemplo
isOpened	true · false	true
activeItem	cargas veiculos	cargas

Classes CSS

Lidas do SCSS (src/scss) — só aparece aqui o que realmente existe.

Tipo	Classes
Bloco	.mds-btn .mds-menu .mds-menu-business .mds-menu-header .mds-menu-item .mds-menu-user
Elementos	.mds-dropdown__wrap .mds-menu__footer .mds-menu__group .mds-menu__group__content .mds-menu__group__toggle .mds-menu__header .mds-menu__nav .mds-menu__nav__list .mds-menu__nav__list__header .mds-menu__powered .mds-menu__themes .mds-menu-business__info .mds-menu-item__content .mds-menu-item__icon .mds-menu-item__icon-back .mds-menu-item__icon-submenu .mds-menu-item__options .mds-menu-item__subtext .mds-menu-item__text
Modificadores	.mds-badge--fixed .mds-icon--sm .mds-menu__powered--active .mds-menu--closed .mds-menu--default .mds-menu--floating .mds-menu--floating-opened .mds-menu--local .mds-menu--opened .mds-menu--sticky .mds-menu--white .mds-menu-item--active .mds-menu-item--disabled .mds-menu-item--flex .mds-menu-item--has-notify .mds-menu-item--lg .mds-menu-item--sm .mds-menu-user--responsive

Angular (mds-angular)

mds-menu

O Menu Global é a estruturação da navegação principal do sistema

Inputs

Input	Tipo	Padrão	Descrição
className	string	''	Classe CSS customizada adicionada ao host
version	string	'v1'	Versão do sistema
secundaryMenu	boolean	false	Modificação visual para menu secundário
img	string	—	logo para o menu flutuante
fixed	boolean	false	Menu fixo na lateral
forceFloating	boolean	false	Força o comportamento de menu flutuante

Outputs

Output	Payload	Descrição
toggleEmitter	boolean	—

Slots

Conteúdo projetado com o atributo data-position:

• data-position="menu-business"
• data-position="menu-itens"
• data-position="menu-fixed"
• data-position="menu-user"

[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 }	—

Visão ao vivo

Figma

Menu Lateral / Sidebar — Figma (Design System 2.0) ↗

HTML/CSS

Storybook mds-styles (HTML/CSS) — layout-menu ↗

Angular

Storybook mds-angular — components-menu ↗