Instruções para a IDG 1

Habilitando a barra na página

Cole este código após a abertura da tag <body>.

<div id="barra-brasil" style="background:#7F7F7F; height: 20px; padding:0 0 0 10px;display:block;">
  <ul id="menu-barra-temp" style="list-style:none;">
    <li style="display:inline; float:left;padding-right:10px; margin-right:10px; border-right:1px solid #EDEDED">
        <a href="http://brasil.gov.br" style="font-family:sans,sans-serif; text-decoration:none; color:white;">Portal do Governo Brasileiro</a>
    </li>
    <li>
       <a style="font-family:sans,sans-serif; text-decoration:none; color:white;" href="http://epwg.governoeletronico.gov.br/barra/atualize.html">Atualize sua Barra de Governo</a>
    </li>
  </ul>
</div>

Importante

A página deve implementar a recomendação da eMAG 1.5 de fornecer âncoras para ir direto a um bloco de conteúdo. O primeiro link da página deve ser o de ir para o conteúdo. Veja um exemplo de implementação da barra com o uso do primeiro link para ir para o conteúdo.

Cole este código ao final antes do fechamento da tag <body>. A boa prática orienta que códigos JavaScript que modificam a página no momento do carregamento devem ser declarados ao final do elemento <body>.

<script defer="defer" src="//barra.brasil.gov.br/barra.js" type="text/javascript"></script>

Nota

Se utilizar em XHTML não é permitido a minificar os atributos. Se for em HTML é possível utilizar somente ‘defer’ conforme exemplo feito pelo W3Schools para a tag script. Caso deseje outra língua por favor verifique a seção `Outras línguas da barra`_.

Outras línguas da barra

A Barra Brasil está disponível em português do Brasil, inglês, francês e espanhol. Caso deseje utilizar outra língua altere para:

Para habilitar/desabilitar o alto contraste na barra

Para habilitar o alto contraste da barra e do rodapé habilite a classe ‘contraste’ no body:

<body class="contraste">

Para desabilitar o alto contraste da barra e do rodapé desabilite a classe ‘contraste’ no body:

<body class="">

Instruções para a IDG 2

Habilitando a barra na página

Cole este código após a abertura da tag <body>.

<div id="barra-brasil" style="background:#7F7F7F; height: 20px; padding:0 0 0 10px;display:block;">
  <ul id="menu-barra-temp" style="list-style:none;">
    <li style="display:inline; float:left;padding-right:10px; margin-right:10px; border-right:1px solid #EDEDED">
        <a href="http://brasil.gov.br" style="font-family:sans,sans-serif; text-decoration:none; color:white;">Portal do Governo Brasileiro</a>
    </li>
  </ul>
</div>

Importante

A página deve implementar a recomendação da eMAG 1.5 de fornecer âncoras para ir direto a um bloco de conteúdo. O primeiro link da página deve ser o de ir para o conteúdo. Veja um exemplo de implementação da barra com o uso do primeiro link para ir para o conteúdo.

Cole este código ao final antes do fechamento da tag <body>. A boa prática orienta que códigos JavaScript que modificam a página no momento do carregamento devem ser declarados ao final do elemento <body>.

<script defer="defer" src="//barra.brasil.gov.br/barra_2.0.js" type="text/javascript"></script>

Nota

Se utilizar em XHTML não é permitido a minificar os atributos. Se for em HTML é possível utilizar somente ‘defer’ conforme exemplo feito pelo W3Schools para a tag script. Caso deseje outra língua por favor verifique a seção `Outras línguas da barra`_.

Outras línguas da barra

A Barra Brasil está disponível em português do Brasil, inglês, francês e espanhol. Caso deseje utilizar outra língua altere para:

Mantendo o contexto do órgão no Portal de Serviços ao clicar no link ‘Serviços’ da barra

Para habilitar o parâmentro ‘orgao’ no link de ‘Serviços’ cole este código na tag <head>.

<meta property="creator.productor"
      content="http://estruturaorganizacional.dados.gov.br/id/unidade-organizacional/NUMERO">

Importante

Esse código é específico para cada órgão. Não utilize códigos de outros órgãos. Troque o NUMERO pelo número correto do órgão no SIORG. Acesse o SIORG e procure pelo seu órgão.

Habilitando o footer dinâmico na barra

Para o footer dinâmico coloque este código no local do footer e aplique um dos css abaixo conforme seu tema

<div id="footer-brasil"></div>

Versão da Barra

A versão da Barra Brasil pode ser encontrada no topo do Javascript na tag @version.

$ curl -s https://barra.brasil.gov.br/barra.js | head -c 171 | grep @version

/** @version 2.2.18 @source http://softwarepublico.gov.br/gitlab/govbr/barra-govbr/
@license magnet:?xt=urn:btih:90dc5c0be029de84e523b9b3922520e79e0e6f08&dn=cc0.txt CC0 */