Pular para conteúdo

Sobre a barra

A barra tem a função de identificar, padronizar e integrar sites e portais do Governo Federal. À sua direita, a marca do Governo Federal com link para o Portal de Estado do Brasil www.brasil.gov.br.

Seu uso está normatizado por meio da Instrução Normativa nº 2, de 16 de dezembro de 2009, que pode ser encontrada no site da Secretaria de Comunicação Social da Presidência da República - Secom.

A implementação apresentada traz melhorias no código dos exemplos disponibilizados como: redução da quantidade de código; conformidade e acessibilidade.

Faça o download das imagens e aplique os códigos abaixo.

Download das Imagens (12,5 KB, .zip)

Aplicando o HTML

<div id="barra-brasil">
    <div class="barra">
        <ul>
            <li><a href="http://www.acessoainformacao.gov.br" class="ai" title="Acesso à informação">www.sic.gov.br</a></li>
            <li><a href="http://www.brasil.gov.br" class="brasilgov" title="Portal de Estado do Brasil">www.brasil.gov.br</a></li>
        </ul>
    </div>
</div>

Aplicando o CSS

Ao aplicar o CSS levar em consideração a técnica CSS Reset para uma melhor visualização e compatibilidade com outos navegadores. O exemplo abaixo é relativo a cor azul (hexadecimal: #004b82).

#barra-brasil { 
    position:relative;
    overflow:hidden;
    min-width:1000px;
    background: #004b82 url(imagens/barra-brasil-v3-bgx.png) center bottom no-repeat;
}

#barra-brasil .barra {
    display: block;
    width: 960px;
    height:28px;
    margin: 0 auto;
    background: url(imagens/barra-brasil-v3-bgx.gif) 0 bottom repeat-x;
}

#barra-brasil .barra ul {
    float:right;
    width: 319px;
}

#barra-brasil .barra ul li {
    float: left;
    padding-left: 25px;
}

#barra-brasil .ai {
    display: block;
    width: 161px;
    height: 28px;
    text-indent: -1000px;
    background: #004b82 url(imagens/ai.png) no-repeat 0 4px;
}

#barra-brasil .brasilgov {
    display: block;
    width: 101px;
    height: 28px;
    text-indent: -1000px;
    background: #004b82 url(imagens/brasil.png) no-repeat 0 4px;
}

Cores Disponíveis