Topbar

• Angular: mds-topbar
• CSS/HTML (mds-styles): disponível
• Figma: ✅ — abrir Design System 2.0 ↗
• Tipo: Core

Definição Funcional

)

A Topbar é a barra de utilitários superior que fornece contexto global e ferramentas de navegação persistentes. Ela exibe a identidade da marca, o nome do produto ativo e agrupa ações essenciais como busca, notificações e configurações de conta.

---

**Diretrizes dos Elementos **

• Marca e Nome do Produto: Identifica a plataforma e o módulo atual (ex: Torre de Controle). Use Caixa de Título.
• Busca Global: Barra de pesquisa para localização rápida de registros (cargas, veículos, motoristas) em todo o sistema.
• Acesso Rápido: Agrupa utilitários que devem estar acessíveis de qualquer tela, como notificações e configurações.
• Central de Ajuda: Concentra recursos de suporte e documentação para o usuário.
• Seletor de Produtos: Permite a alternância rápida entre diferentes sistemas do ecossistema Mobiis.
• Perfil e Empresa: Exibe o usuário logado e a unidade/empresa ativa.

---

Edições de Texto

Elemento no Print	Sugestão UX Writing (Mais Conciso)	Justificativa
Marca: Elemento visual que representa a Mobiis…	Exibe o logotipo da marca ou parceiro.	Direto ao ponto, elimina redundância.
Busca global (se possuir)	Busca Global	Remove o parênteses; a diretriz de “se possuir” fica na regra de uso.
Central de ajuda: Área destinada a exibir menu…	Central de Ajuda	O nome da área já é o rótulo. A descrição deve focar na função.
Ação do menu global: Expande/compacta…	Controle do Menu Lateral	Define a função da ação de forma técnica e clara.

---

Exemplos de Escrita para Placeholders e Tooltips

Contexto	Estilo Prolixo	Estilo UX (Direto)
Placeholder de Busca	Pesquise por placas, nomes ou IDs aqui…	Pesquisa global
Tooltip de Notificações	Clique para ver suas notificações	Notificações
Seletor de Unidade	Você está visualizando a unidade Matriz	Unidade: Matriz

Visão ao vivo

Storybook mds-angular — components-topbar ↗

Componentes relacionados

• Tooltip
• Menu Lateral / Sidebar