Design System SIMEC

Navigation menu - menu de navegação

Menu único para as etapas da obra: desktop e mobile, com ou sem ícones e divisões, com estados de hover e arquivos para baixar. CSS e JS puros, sem dependências, para sistemas legados.

A partir de 768px todos os destinos aparecem em linhas. O grupo “Navegação da obra” abre um submenu; clique para abrir e fechar (nada depende de hover).

Ícones do Font Awesome antes do texto. O ícone reforça o rótulo e herda a cor do item (branco no item ativo).

Quando a lista é longa, separe os destinos em grupos com rótulo e filete (.simec-nav__divisor). Os grupos abaixo são um exemplo de organização; use os nomes que fizerem sentido para a tela.

Desktop

Mobile (390 px), menu aberto

Abaixo de 768px o menu vira uma lista vertical com botão Menu/Fechar e áreas de toque de 48px. Os submenus abrem como sanfona.

Fechado

Aberto, com submenus

Até dois níveis: o grupo “Navegação da obra” (nível 1) e “Conclusão da obra” (nível 2, abre ao lado). O recuo de cada nível vem dos tokens --simec-nav-indent-sub1 e --simec-nav-indent-sub2.

Passe o mouse nos itens da coluna “Interativo”. As outras colunas mostram cada estado fixo (classes .is-hover e .is-foco servem para documentar e testar).

Estado	Interativo (passe o mouse)	Estado fixo	Variáveis
Normal	Dados da Obra	Dados da Obra	--simec-link · --simec-bg
Hover	Dados da Obra	Dados da Obra	--simec-nav-text-hover · --simec-bg-hover
Foco (teclado)	Dados da Obra	Dados da Obra	--simec-border-focus
Ativo (página atual)	Dados da Obra	Dados da Obra	--simec-nav-bg-active · --simec-nav-text-active
Desabilitado	Dados da Obra	Dados da Obra	--simec-nav-text-disabled

Inclua o estilo no <head>:

<link rel="stylesheet" href="simec-nav.css">

Cole a marcação onde o menu deve aparecer (botão “Ver código” em qualquer exemplo acima). Para ícones, inclua o Font Awesome na página.

Inclua o script no fim da página. Ele inicia sozinho todo [data-simec-nav]:

<script src="simec-nav.js"></script>

// conteúdo carregado depois (AJAX):
SimecNav.init(document.querySelector("#meu-menu"));

Classes e estados

.simec-nav--mobile       força o layout mobile em qualquer largura
.simec-nav__divisor      divisão com rótulo entre grupos de itens (li role="separator")
.is-ativo                item da página atual (fundo azul sólido, texto branco)
aria-current="page"      destino atual (também aplica o destaque)
aria-expanded            estado dos botões que abrem submenus (o JS alterna)
aria-disabled="true"     item desabilitado (sem clique e sem destaque)

Cada página de exemplo funciona sozinha (HTML + CSS + JS, sem build). Baixe a variação que mais se parece com a sua tela e copie a marcação.

Arquivo	Para que serve	Baixar
simec-nav.css	Estilo do Menu de navegação. Um arquivo, sem dependências.	Baixar
simec-nav.js	Comportamento do menu em JavaScript puro (ES5), sem jQuery.	Baixar
simec-nav.html	Página de exemplo completa (só texto), pronta para abrir e copiar.	Baixar
simec-nav-icones.html	Mesma página com ícones (Font Awesome).	Baixar
simec-nav-divisoes.html	Página com ícones e divisões entre grupos de itens.	Baixar

Ver simec-nav.css

/*!
 * SIMEC · Menu de navegação — Design System SIMEC (FNDE) · base Bootstrap 3
 * Arquivo único, sem dependências. Use com ou sem tokens.css (há valores padrão).
 *
 *   <link rel="stylesheet" href="simec-nav.css">
 *   <script src="simec-nav.js"></script>
 *
 * Responsivo: abaixo de 768px vira lista vertical com botão Menu/Fechar.
 * Classe .simec-nav--mobile força o layout mobile em qualquer largura.
 * Ícones (opcionais): Font Awesome, dentro de <i class="simec-nav__icone fa-solid fa-...">.
 * Divisões (opcionais): <li class="simec-nav__divisor" role="separator"><span class="simec-nav__divisor-rotulo">Grupo</span></li>
 * Estados forçados (documentação e testes): .is-hover · .is-foco · .is-ativo · aria-disabled="true".
 */

.simec-nav {
  --_texto: var(--simec-text, #333333);
  --_link: var(--simec-link, #2e6db4);
  --_link-hover: var(--simec-nav-text-hover, #23527c);
  --_fundo: var(--simec-bg, #ffffff);
  --_superficie: var(--simec-bg-surface, #f5f5f5);
  --_hover: var(--simec-bg-hover, #eeeeee);
  --_borda: var(--simec-border-light, #dddddd);
  --_foco: var(--simec-border-focus, #66afe9);
  --_ativo: var(--simec-nav-bg-active, #24558b);
  --_ativo-texto: var(--simec-nav-text-active, #ffffff);
  --_desab: var(--simec-nav-text-disabled, #999999);
  --_secundario: var(--simec-text-muted, #777777);
  --_raio: var(--simec-radius, 4px);
  --_alvo: var(--simec-nav-touch-target, 48px);
  --_altura: var(--simec-nav-item-height, 30px);
  --_sub1: var(--simec-nav-indent-sub1, 16px);
  --_sub2: var(--simec-nav-indent-sub2, 20px);

  position: relative;
  color: var(--_texto);
  font: 14px/20px var(--simec-font-family, "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif);
}
.simec-nav *,
.simec-nav *::before,
.simec-nav *::after {
  box-sizing: border-box;
}
.simec-nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.simec-nav p {
  margin: 0;
}

/* ── Barra (título + botão Menu) ─────────────────────────── */
.simec-nav__barra {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 4px 0 16px;
  background: var(--_superficie);
  border: 1px solid var(--_borda);
  border-radius: var(--_raio);
}
.simec-nav__titulo {
  font-weight: 700;
}
.simec-nav__titulo-longo {
  display: none;
}
.simec-nav__toggle {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: var(--_alvo);
  padding: 0 12px;
  color: var(--_link);
  background: transparent;
  border: 0;
  border-radius: var(--_raio);
  font: inherit;
  cursor: pointer;
}
.simec-nav__toggle:hover {
  color: var(--_link-hover);
  background: var(--_hover);
}
.simec-nav__toggle-icone {
  position: relative;
  display: inline-block;
  width: 18px;
  height: 2px;
  background: currentColor;
}
.simec-nav__toggle-icone::before,
.simec-nav__toggle-icone::after {
  content: "";
  position: absolute;
  left: 0;
  width: 18px;
  height: 2px;
  background: currentColor;
}
.simec-nav__toggle-icone::before {
  top: -6px;
}
.simec-nav__toggle-icone::after {
  top: 6px;
}
.simec-nav.is-aberto .simec-nav__toggle-icone {
  background: transparent;
}
.simec-nav.is-aberto .simec-nav__toggle-icone::before {
  top: 0;
  transform: rotate(45deg);
}
.simec-nav.is-aberto .simec-nav__toggle-icone::after {
  top: 0;
  transform: rotate(-45deg);
}
.simec-nav__rotulo-fechar,
.simec-nav.is-aberto .simec-nav__rotulo-abrir {
  display: none;
}
.simec-nav.is-aberto .simec-nav__rotulo-fechar {
  display: inline;
}

/* ── Corpo (lista de destinos) ───────────────────────────── */
.simec-nav__corpo {
  display: none;
  padding: 8px;
  background: var(--_fundo);
  border: 1px solid var(--_borda);
  border-top: 0;
}
.simec-nav.is-aberto .simec-nav__corpo {
  display: block;
}
.simec-nav__rotulo-grupo {
  padding: 8px;
  color: var(--_secundario);
  font-size: 12px;
  line-height: 16px;
  text-transform: uppercase;
}

/* ── Item (link ou botão) ────────────────────────────────── */
.simec-nav__item {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: var(--_alvo);
  padding: 0 16px;
  color: var(--_link);
  background: transparent;
  border: 0;
  border-radius: var(--_raio);
  font: inherit;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.simec-nav__item:hover {
  color: var(--_link-hover);
  background: var(--_hover);
  text-decoration: none;
}
.simec-nav__item.is-hover {
  color: var(--_link-hover);
  background: var(--_hover);
}
.simec-nav__item:focus-visible,
.simec-nav__item.is-foco {
  outline: 2px solid var(--_foco);
  outline-offset: -2px;
  background: var(--_fundo);
  text-decoration: none;
}
.simec-nav__item.is-ativo,
.simec-nav__item.is-ativo:hover,
.simec-nav__item[aria-current] {
  color: var(--_ativo-texto);
  background: var(--_ativo);
  font-weight: 700;
}
.simec-nav__item.is-ativo:focus-visible {
  outline-color: var(--_foco);
}
.simec-nav__item[aria-disabled="true"] {
  color: var(--_desab);
  background: transparent;
  pointer-events: none;
  cursor: default;
}
/* Divisões: rótulo + filete entre grupos de itens (opcional) */
.simec-nav__divisor {
  margin-top: 8px;
  padding: 12px 8px 0;
  border-top: 1px solid var(--_borda);
}
.simec-nav__divisor:first-child {
  margin-top: 0;
  padding-top: 4px;
  border-top: 0;
}
.simec-nav__divisor-rotulo {
  color: var(--_secundario);
  font-size: 12px;
  line-height: 16px;
  text-transform: uppercase;
}
.simec-nav__icone {
  flex: none;
  width: 20px;
  margin-right: 12px;
  color: var(--_texto);
  text-align: center;
}
.is-ativo > .simec-nav__icone,
.simec-nav__item[aria-current] > .simec-nav__icone {
  color: inherit;
}
.simec-nav__texto {
  flex: 1 1 auto;
}

/* Setas (CSS puro) */
.simec-nav__seta {
  flex: none;
  width: 8px;
  height: 8px;
  margin: -4px 4px 0 12px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
}
.simec-nav__gatilho[aria-expanded="true"] > .simec-nav__seta {
  margin-top: 4px;
  transform: rotate(-135deg);
}

/* ── Grupo "Navegação da obra" e submenus (mobile: sanfona) ── */
.simec-nav__grupo {
  margin-top: 8px;
  border-top: 1px solid var(--_borda);
  padding-top: 8px;
}
.simec-nav__sub,
.simec-nav__sub2 {
  display: none;
}
.simec-nav__gatilho[aria-expanded="true"] + .simec-nav__sub,
.simec-nav__gatilho[aria-expanded="true"] + .simec-nav__sub2 {
  display: block;
}
.simec-nav__sub {
  margin-top: 4px;
  padding: 8px;
  border: 1px solid var(--_borda);
  border-radius: var(--_raio);
}
.simec-nav__sub .simec-nav__item {
  padding-left: var(--_sub1);
}
.simec-nav__sub2 .simec-nav__item {
  padding-left: calc(var(--_sub1) + var(--_sub2));
}

/* ── Desktop (≥ 768px) ───────────────────────────────────── */
@media (min-width: 768px) {
  .simec-nav:not(.simec-nav--mobile) .simec-nav__titulo-longo {
    display: inline;
  }
  .simec-nav:not(.simec-nav--mobile) .simec-nav__titulo-curto,
  .simec-nav:not(.simec-nav--mobile) .simec-nav__toggle,
  .simec-nav:not(.simec-nav--mobile) .simec-nav__rotulo-grupo {
    display: none;
  }
  .simec-nav:not(.simec-nav--mobile) .simec-nav__barra {
    padding: 10px 16px;
    background: var(--_fundo);
  }
  .simec-nav:not(.simec-nav--mobile) .simec-nav__corpo {
    display: block;
    padding: 8px 0 0;
    background: transparent;
    border: 0;
  }
  .simec-nav:not(.simec-nav--mobile) .simec-nav__lista {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 8px;
  }
  .simec-nav:not(.simec-nav--mobile) .simec-nav__divisor,
  .simec-nav:not(.simec-nav--mobile) .simec-nav__divisor:first-child {
    flex: 0 0 100%;
    margin-top: 4px;
    padding: 12px 0 0;
    border-top: 1px solid var(--_borda);
  }
  .simec-nav:not(.simec-nav--mobile) .simec-nav__divisor:first-child {
    margin-top: 0;
    padding-top: 4px;
    border-top: 0;
  }
  .simec-nav:not(.simec-nav--mobile) .simec-nav__item {
    width: auto;
    min-height: var(--_altura);
    padding: 0 16px;
  }
  .simec-nav:not(.simec-nav--mobile) .simec-nav__grupo {
    position: relative;
    display: inline-block;
    min-width: 285px;
    margin-top: 12px;
    padding-top: 0;
    border-top: 0;
  }
  .simec-nav:not(.simec-nav--mobile) .simec-nav__grupo > .simec-nav__item {
    width: 100%;
    border: 1px solid var(--_borda);
    background: var(--_fundo);
  }
  .simec-nav:not(.simec-nav--mobile) .simec-nav__grupo > .simec-nav__item[aria-expanded="true"],
  .simec-nav:not(.simec-nav--mobile) .simec-nav__grupo > .simec-nav__item:hover {
    background: var(--_hover);
  }
  .simec-nav:not(.simec-nav--mobile) .simec-nav__sub {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 1000;
    margin-top: 4px;
    padding: 4px;
    background: var(--_fundo);
  }
  .simec-nav:not(.simec-nav--mobile) .simec-nav__sub .simec-nav__item {
    width: 100%;
    padding-left: 12px;
  }
  .simec-nav:not(.simec-nav--mobile) .simec-nav__tem-sub {
    position: relative;
  }
  .simec-nav:not(.simec-nav--mobile) .simec-nav__gatilho--sub2 > .simec-nav__seta {
    margin: 0 4px 0 12px;
    transform: rotate(-45deg);
  }
  .simec-nav:not(.simec-nav--mobile) .simec-nav__sub2 {
    position: absolute;
    top: 0;
    left: calc(100% + 8px);
    z-index: 1001;
    min-width: 220px;
    padding: 4px;
    background: var(--_fundo);
    border: 1px solid var(--_borda);
    border-radius: var(--_raio);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
  }
  .simec-nav:not(.simec-nav--mobile) .simec-nav__sub2 .simec-nav__item {
    padding-left: 12px;
    white-space: nowrap;
  }
}

Ver simec-nav.js

/*!
 * SIMEC · Menu de navegação — Design System SIMEC (FNDE)
 * JavaScript puro (ES5), sem dependências. Funciona em sistemas legados.
 *
 * Uso: inclua o script no fim da página. Todo elemento com o atributo
 * data-simec-nav é iniciado sozinho. Para conteúdo carregado depois:
 *   SimecNav.init(elemento);   // ou SimecNav.initAll();
 */
(function (global) {
  "use strict";

  var ABERTO = "is-aberto";

  function lista(el, seletor) {
    return Array.prototype.slice.call(el.querySelectorAll(seletor));
  }

  function expandido(botao) {
    return botao.getAttribute("aria-expanded") === "true";
  }

  function definir(botao, aberto) {
    botao.setAttribute("aria-expanded", aberto ? "true" : "false");
  }

  function fecharSubmenus(raiz) {
    lista(raiz, ".simec-nav__gatilho").forEach(function (b) {
      definir(b, false);
    });
  }

  function init(raiz) {
    if (!raiz || raiz.getAttribute("data-simec-nav-pronto") === "true") return raiz;
    raiz.setAttribute("data-simec-nav-pronto", "true");

    var toggle = raiz.querySelector(".simec-nav__toggle");

    // Botão Menu / Fechar (mobile)
    if (toggle) {
      definir(toggle, raiz.classList.contains(ABERTO));
      toggle.addEventListener("click", function () {
        var aberto = !raiz.classList.contains(ABERTO);
        raiz.classList.toggle(ABERTO, aberto);
        definir(toggle, aberto);
      });
    }

    // Grupo "Navegação da obra" e submenu2
    lista(raiz, ".simec-nav__gatilho").forEach(function (botao) {
      botao.addEventListener("click", function () {
        definir(botao, !expandido(botao));
      });
    });

    // Esc fecha tudo e devolve o foco ao botão
    raiz.addEventListener("keydown", function (e) {
      if (e.key !== "Escape" && e.keyCode !== 27) return;
      fecharSubmenus(raiz);
      if (raiz.classList.contains(ABERTO) && toggle) {
        raiz.classList.remove(ABERTO);
        definir(toggle, false);
        toggle.focus();
      }
    });

    // Clique fora fecha os submenus (desktop)
    document.addEventListener("click", function (e) {
      if (!raiz.contains(e.target)) fecharSubmenus(raiz);
    });

    return raiz;
  }

  function initAll(contexto) {
    lista(contexto || document, "[data-simec-nav]").forEach(init);
  }

  var SimecNav = { init: init, initAll: initAll, versao: "1.0.0" };
  global.SimecNav = SimecNav;

  if (typeof document !== "undefined") {
    if (document.readyState === "loading") {
      document.addEventListener("DOMContentLoaded", function () {
        initAll();
      });
    } else {
      initAll();
    }
  }
})(typeof window !== "undefined" ? window : this);

Button - botão

Tamanhos, modelos só com texto, com texto e ícone, só com ícone, estados com hover, funcionais e arquivos para baixar.

1. Sizes - tamanhos

Quatro alturas do Figma: 22, 30, 34 e 46px. Use o padrão (34px) na maioria das telas; o XS é só para ações dentro de tabelas.

XS · 22px

SM · 30px

Padrão · 34px

LG · 46px

2. Text only - somente texto

Sete estilos. O primário é a ação principal da tela: use um por bloco.

3. Text and icon - texto e ícone

O ícone vem antes do texto; setas de avanço vão depois. O ícone reforça o texto, nunca o substitui.

4. Icon only - somente ícone

Quadrado, com a mesma altura do tamanho escolhido. Sem texto, o botão precisa de um nome: use BotaoIcone (rótulo obrigatório, vira aria-label e dica).

Estilos

Tamanhos

5. Hover and states - modelos funcionais com hover

Cada estilo muda de cor em hover e ativo usando as variáveis da última coluna. Passe o mouse nos botões da primeira coluna; as outras mostram cada estado fixo para você comparar.

Estilo	Normal (passe o mouse)	Hover	Ativo	Foco	Desabilitado	Variáveis
Primário						--simec-primary · -border · -hover
Sucesso						--simec-success · -border · -hover
Padrão						--simec-bg · --simec-border · --simec-neutral-hover
Perigo						--simec-danger · -border · -hover
Aviso						--simec-warning · -border · -hover
Informação						--simec-info · -border · -hover
Link						--simec-link · --simec-primary-hover

6. Functional and componentized - modelos com funcionalidades

Três comportamentos prontos: BotaoCarregando (bloqueia clique repetido enquanto salva), BotaoAlternar (liga e desliga, com aria-pressed) e BotaoIcone. Teste abaixo e baixe os componentes na seção seguinte.

Carregando (clique)

Alternar (clique)

Só ícone com dica (passe o mouse)

7. Downloads - modelos para baixar

HTML5 + CSS puros, sem dependências e sem build: classes .simec-btn. O simec-button.js é opcional e traz os botões carregando e alternar (data-simec-loading e data-simec-toggle).

Arquivo	Para que serve	Baixar
simec-button.css	Classes .simec-btn para qualquer tela. Um arquivo, sem dependências.	Baixar
simec-button.js	Botão carregando e botão alternar em JavaScript puro (ES5), opcional.	Baixar
simec-button.html	Página de exemplo com tamanhos, ícones e estados, pronta para copiar.	Baixar

Text input - campo de texto

form-control em 3 tamanhos (30, 34 e 45px) e estados padrão, desabilitado, sucesso, aviso e erro.

SM · 30px

Padrão · 34px

LG · 45px

Observação

HTML5 + CSS para o DEV: Ver Baixar HTML Baixar CSS

Radio and checkbox - rádio e checkbox

Rádio legado do SIMEC (SIM / NÃO / NÃO SE APLICA) e checkbox.

SIM

NÃO

NÃO SE APLICA

Li e concordo

HTML5 + CSS para o DEV: Ver Baixar HTML Baixar CSS

Tabs - abas

nav-tabs do Bootstrap 3: inativa em azul, hover cinza, ativa em branco com borda.

Conteúdo da aba Documentação.

HTML5 + CSS para o DEV: Ver Baixar HTML Baixar CSS Baixar JS

Table - tabela

Tabela legada do SIMEC: cabeçalho cinza em negrito, rótulo à direita, bordas #c0c0c0. Opções striped e condensed.

Questão	Situação
1) O Projeto Pactuado está inserido?
2) O Memorial Descritivo está inserido?

Tipo de ensino:	Educação Básica
Município - UF:	Riachão - PB
Obra:	Escola de Educação Infantil - Tipo B

HTML5 + CSS para o DEV: Ver Baixar HTML Baixar CSS

Alerts - alertas

Operação concluída com sucesso.

Informação importante sobre a obra.

Atenção: há pendências no preenchimento.

Não foi possível salvar os dados.

Senhor Prefeito/Secretário, o seu município já recebeu recursos para as obras AQUI LISTADAS e estas apresentam pendências em sua execução.

HTML5 + CSS para o DEV: Ver Baixar HTML Baixar CSS

Status bar - barra de situação

Situação atual: ParalisadaSituação Portaria 17.951: ParalisadaÚltima atualização: 01/06/2023 (1211 dia(s))Fiscal da Unidade: GLAUCIO RABELO BANDEIRA

HTML5 + CSS para o DEV: Ver Baixar HTML Baixar CSS

Modal

600px (padrão BS3) e 900px (extensão do SIMEC, size=“lg”).

HTML5 + CSS para o DEV: Ver Baixar HTML Baixar CSS

Badges - rótulos

Primário

Padrão

Sucesso

Aviso

Perigo

Informação

HTML5 + CSS para o DEV: Ver Baixar HTML Baixar CSS

Status icons - ícones de situação

HTML5 + CSS para o DEV: Ver Baixar HTML Baixar CSS

Components - componentes

Navigation menu - menu de navegação

1. Desktop - sem ícones (somente texto)

2. Desktop - com ícones

3. With dividers - com divisões

4. Mobile - Menu / Fechar

5. Submenus - níveis

6. Hover and states - efeitos on hover e estados

7. How to use - como usar

Classes e estados

8. Downloads - aplicações para baixar

Button - botão

1. Sizes - tamanhos

2. Text only - somente texto

3. Text and icon - texto e ícone

4. Icon only - somente ícone

5. Hover and states - modelos funcionais com hover

6. Functional and componentized - modelos com funcionalidades

7. Downloads - modelos para baixar

Text input - campo de texto

Radio and checkbox - rádio e checkbox

Tabs - abas

Table - tabela

Alerts - alertas

Status bar - barra de situação

Badges - rótulos

Status icons - ícones de situação