--- title: Navigation Bar localeTitle: Barra de navegação --- ## Barra de navegação A estrutura do Bootstrap fornece uma barra de navegação de chamada de recurso. Resumindo, uma barra de navegação (também chamada de navbars) é um cabeçalho na parte superior da página para exibir informações de navegação. #### Como usar Para usar as barras de navegação do Bootstrap, você adiciona um elemento `

` ao topo dentro do elemento `` da sua página da web. Existem vários estilos que você pode adicionar para personalizar a exibição de suas barras de navegação. #### Exemplo de código Este é o código necessário para criar uma barra de navegação básica. ```html ``` #### Estilos de Navbar O Bootstrap fornece um conjunto de classes na estrutura do Bootstrap para estilizar suas navbars. Essas classes são as seguintes: * `navbar navbar-default` Este é o estilo padrão para suas navbars. * `navbar navbar-inverse` É semelhante ao estilo padrão, exceto que as cores são invertidas. #### Adicionando menus suspensos à barra de navegação Você pode incluir um menu suspenso dentro de uma barra de navegação. Esse recurso exige que você inclua o arquivo javascript do Bootstrap para que ele funcione. ```html ``` #### Adicionando botões à barra de navegação Você pode adicionar botões na barra de navegação. As classes existentes do Botão Bootstrap funcionam, no entanto, você precisará incluir a classe `navbar-btn` no final da lista de classes. ```html ``` #### Adicionando formulários à barra de navegação Você também pode adicionar formulários à barra de navegação. Isso pode ser usado para tarefas como um campo de pesquisa, um campo de login rápido, etc. ```html ``` #### Alinhando elementos à direita na barra de navegação Em alguns casos, você pode querer alinhar elementos em uma barra de navegação à direita (por exemplo, um botão de login ou inscrição). Para fazer isso, você precisará usar a classe `navbar-right` da `navbar-right` . ```html ``` #### Exibindo a barra de navegação independente da rolagem Em alguns casos, você pode querer manter a barra de navegação na parte superior ou inferior da tela, independentemente da rolagem. Você precisará adicionar a classe `navbar-fixed-top` ou `navbar-fixed-bottom` ao elemento `

` . ```html ``` #### Recolhendo a barra de navegação Em uma tela pequena (como um telefone ou tablet), a barra de navegação ocupará muito espaço. Felizmente a opção de collase a navbar existe. Você pode fazer isso usando o seguinte exemplo. ```html ``` #### Exemplos de Navbar `navbar navbar-default` [Nome do site](#navbar-default) * [Casa](#navbar-default) * [Página 1](#navbar-default) * [Página 2](#navbar-default) * [Página 3](#navbar-default) Botão * [Link de ação 1](#navbar-default) * [Link de ação nº 2](#navbar-default) `navbar navbar-inverse` [Nome do site](#navbar-inverse) * [Casa](#navbar-inverse) * [Página 1](#navbar-inverse) * [Página 2](#navbar-inverse) * [Página 3](#navbar-inverse) Botão * [Link de ação 1](#navbar-inverse) * [Link de ação nº 2](#navbar-inverse) #### Mais Informações: [Documentação de navbar do Bootstrap](https://getbootstrap.com/docs/4.0/components/navbar/)