Topbar

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

)

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

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 Default do Storybook:

<header class="mds-top-bar mds-top-bar--sticky">
    <div class="flex-grow-1 d-flex align-items-center gap--md">
      <button class="mds-btn mds-btn--control mds-btn--sm mds-btn--icon-only">
        <span class="mds-btn__icon">
          <i data-lucide="panel-left-close"></i>
        </span>
      </button>
      <svg width="122" height="62" viewBox="0 0 122 62" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M102.639 25.3609C102.059 25.3609 101.555 25.1478 101.126 24.7216C100.7 24.2955 100.486 23.7921 100.486 23.208C100.486 22.6238 100.7 22.1168 101.126 21.6833C101.552 21.2461 102.055 21.0293 102.639 21.0293C103.223 21.0293 103.752 21.2461 104.179 21.6833C104.605 22.1205 104.818 22.6275 104.818 23.208C104.818 23.7885 104.605 24.2955 104.179 24.7216C103.752 25.1478 103.238 25.3609 102.639 25.3609ZM68.0472 40.6263V21.5473H64.164L58.7195 30.5559L53.2493 21.5473H49.3809V40.6263H53.1428V28.2964L58.4954 37.1177L58.9363 37.0993L64.3147 28.2523V40.6263H68.0472ZM76.6511 41.0047C78.668 41.0047 80.3763 40.3103 81.776 38.9216C83.1757 37.5328 83.8737 35.8281 83.8737 33.8111C83.8737 31.7941 83.1757 30.0893 81.776 28.7006C80.3763 27.3118 78.668 26.6174 76.6511 26.6174C74.6342 26.6174 72.9296 27.3118 71.5409 28.7006C70.1523 30.0893 69.4579 31.7941 69.4579 33.8111C69.4579 35.8281 70.1523 37.5328 71.5409 38.9216C72.9296 40.3103 74.6342 41.0047 76.6511 41.0047ZM76.6548 37.5732C75.6004 37.5732 74.7224 37.2205 74.0244 36.5114C73.3227 35.8024 72.9737 34.9022 72.9737 33.8147C72.9737 32.7273 73.3264 31.8271 74.0244 31.118C74.7261 30.409 75.6041 30.0563 76.6548 30.0563C77.7055 30.0563 78.5872 30.409 79.2962 31.118C80.0053 31.8271 80.3579 32.7273 80.3579 33.8147C80.3579 34.9022 80.0053 35.8024 79.2962 36.5114C78.5909 37.2205 77.7092 37.5732 76.6548 37.5732ZM93.0251 26.6174C94.8582 26.6174 96.4269 27.3118 97.7274 28.7006C99.028 30.0893 99.6745 31.7941 99.6745 33.8111C99.6745 35.8281 99.0243 37.5328 97.7274 38.9216C96.4269 40.3103 94.8619 41.0047 93.0251 41.0047C91.1882 41.0047 89.6452 40.3434 88.6092 39.0171V40.6263H85.0934V21.551H88.6092V28.6087C89.6452 27.2824 91.1147 26.6211 93.0251 26.6211V26.6174ZM89.6746 36.5776C90.3836 37.294 91.2837 37.6541 92.3711 37.6541C93.4585 37.6541 94.366 37.294 95.0823 36.5776C95.7987 35.8612 96.1587 34.939 96.1587 33.8111C96.1587 32.6832 95.7987 31.761 95.0823 31.0446C94.366 30.3281 93.4622 29.9681 92.3711 29.9681C91.28 29.9681 90.3836 30.3281 89.6746 31.0446C88.9655 31.761 88.6129 32.6832 88.6129 33.8111C88.6129 34.939 88.9655 35.8612 89.6746 36.5776ZM100.894 27.433V40.6263H104.406V27.433C103.866 27.6572 103.271 27.7821 102.65 27.7821C102.029 27.7821 101.434 27.6572 100.894 27.433ZM106.364 27.433V40.6263H109.877V27.433C109.336 27.6572 108.741 27.7821 108.12 27.7821C107.5 27.7821 106.904 27.6572 106.364 27.433ZM108.109 25.3609C107.529 25.3609 107.026 25.1478 106.596 24.7216C106.17 24.2955 105.957 23.7921 105.957 23.208C105.957 22.6238 106.17 22.1168 106.596 21.6833C107.022 21.2461 107.525 21.0293 108.109 21.0293C108.694 21.0293 109.223 21.2461 109.649 21.6833C110.075 22.1205 110.288 22.6275 110.288 23.208C110.288 23.7885 110.075 24.2955 109.649 24.7216C109.223 25.1478 108.708 25.3609 108.109 25.3609ZM115.692 31.7536C115.212 31.5262 114.969 31.2328 114.968 30.8698C114.969 30.5254 115.116 30.2506 115.417 30.0526C115.718 29.8505 116.093 29.7513 116.548 29.7513C117.566 29.7513 118.289 30.2143 118.727 31.1401L121.724 29.5052C121.199 28.5793 120.479 27.8666 119.572 27.3669C118.664 26.8672 117.658 26.6174 116.548 26.6174C115.079 26.6174 113.848 27.0032 112.856 27.7747C111.868 28.5463 111.372 29.6044 111.372 30.949C111.372 31.8418 111.614 32.5803 112.095 33.1718C112.577 33.7596 113.161 34.1932 113.852 34.465C114.542 34.7369 115.233 34.9647 115.924 35.1447C116.611 35.3284 117.198 35.5305 117.68 35.7583C118.161 35.9861 118.403 36.28 118.403 36.6437C118.403 37.4263 117.775 37.8157 116.522 37.8157C115.141 37.8157 114.252 37.2242 113.852 36.0449L110.799 37.7606C111.816 39.9246 113.723 41.0047 116.522 41.0047C118.084 41.0047 119.388 40.6263 120.431 39.8731C121.478 39.12 122 38.0435 122 36.6437C122 35.7179 121.757 34.9463 121.276 34.3291C120.795 33.7119 120.211 33.271 119.52 33.0065C118.829 32.742 118.139 32.5252 117.448 32.3525C116.761 32.1798 116.173 31.9814 115.692 31.7536Z" fill="#27348B"></path><path fill-rule="evenodd" clip-rule="evenodd" d="M30.7117 21.5865C27.292 22.2969 24.487 24.195 22.135 26.6575C24.881 24.4476 29.7464 23.5557 32.3703 23.8991C43.5864 25.371 43.0113 37.3874 33.0755 36.9967C29.3288 36.8507 24.0261 31.8824 20.1889 26.8035C16.3516 21.7247 13.1329 20.5053 9.21692 20.6828C1.68824 21.0262 -3.58301 31.172 2.97651 37.127C5.06453 39.0212 7.94835 40.0275 10.6628 40.063C15.5637 40.1261 18.7903 38.0188 21.8199 34.846C18.4712 37.1901 14.8191 37.9517 11.624 37.5058C-0.242185 35.8444 0.951532 24.1161 10.8755 24.5068C15.2919 24.6804 19.9249 29.6212 23.7621 34.7C27.6033 39.7789 30.9086 41.3416 34.9586 40.947C48.4716 39.6407 45.3514 18.5519 30.7077 21.5865H30.7117Z" fill="#27348B"></path></svg>
      <h1 class="mds-top-bar__title title">Dashboard</h1>
    </div>
    <div role="navigation" class="mds-nav-tabs" aria-label="Nome do produto">
    <nav>
      <ul class="mds-nav-tabs__list">
        <li>
          <a href="#" class="mds-nav-tabs__item mds-nav-tabs__item--active">
            <span class="mds-nav-tabs__item__icon">
              <span class="badge badge--rounded badge--solid badge--danger badge--fixed"></span>
              <i data-lucide="columns"></i>
            </span>
            <span class="mds-nav-tabs__item__text d-none d-lg-block">Quadro</span>
          </a>
        </li>
        <li>
          <a href="#" class="mds-nav-tabs__item">
            <span class="mds-nav-tabs__item__icon"><i data-lucide="list"></i></span>
            <span class="mds-nav-tabs__item__text d-none d-lg-block">Listagem</span>
          </a>
        </li>
      </ul>
    </nav>
  </div>
  <div class="mds-top-bar__controls">
      <div class="mds-input margin-right--md mds-input--md" style="min-width: 256px;">
        <div class="mds-input__content">
          <input decimalmarker="," class="mds-input__field" id="text-field-0.2196470560367373" type="text" placeholder="" autocomplete="on" inputmode="">
          <label class="mds-input__label" for="text-field-0.2196470560367373" title="Pesquisa global">Pesquisa global</label>
          <kbd data-position="input-content" style="position: absolute; right: 8px; top: 12px;">Ctrl+K</kbd>
        </div>
      </div>
    <button class="mds-btn mds-btn--md mds-btn--icon-only mds-btn--transparent">
      <span class="mds-badge mds-badge--rounded mds-badge--solid mds-badge--warning mds-badge--fixed">
        <span class="mds-badge__value">3</span>
      </span>
      <span class="mds-btn__icon"><i data-lucide="megaphone"></i></span>
    </button>
  <!-- … -->

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
hasTabs	true · false	true
hasSearch	true · false	true
notifications	—	3

Classes CSS

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

Tipo	Classes
Bloco	.mds-input .mds-menu-user .mds-nav-tabs .mds-top-bar
Elementos	.mds-top-bar__actions .mds-top-bar__actions__mobile .mds-top-bar__add .mds-top-bar__controls .mds-top-bar__title
Modificadores	.mds-btn--transparent .mds-top-bar--sticky

Angular (mds-angular)

Seletor

mds-topbar

A TopBar é a estrutura básica do cabeçaho do módulo, onde possui as informações do módulo e navegações junto com a central de notificações

Inputs

Input	Tipo	Padrão	Descrição
className	string	''	Classe CSS customizada adicionada ao host
label	string	—	Nome do módulo
img	string	—	Imagem / Logo
fixed	boolean	false	Fixar o header no topo
forceMobile	boolean	false	Força o comportamento de mobile
menuCompacted	boolean	false	Controla o icone para o menu estático
showMenuToggle	boolean	true	Exibe o botão de toggle do menu

Outputs

Output	Payload	Descrição
onToggleMenu	void	—

Slots

Conteúdo projetado com o atributo data-position:

• data-position="mds-topbar-title"
• data-position="mds-topbar-tabs"
• data-position="mds-topbar-options"
• data-position="mds-topbar-actions"

Visão ao vivo

Figma

Topbar — Figma (Design System 2.0) ↗

HTML/CSS

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

Angular

Storybook mds-angular — components-topbar ↗

Componentes relacionados

• Tooltip
• Menu Lateral / Sidebar