# Uso

Nesta seção aprenderemos como adicionar a barra de navegação (navbar) em nosso projeto.
OBS: todos os navbars possui o menu hamburgue, apesar deles são serem exibidos nos exemplos abaixo quando a tela é reduzida.

Navbar simples

Abaixo é apresentada a primeira barra de navegação que pode ser adicionada em seu projeto, trata-se de uma barra de navegação simples. 


<nav class="simple-nav">
  <input type="checkbox" id="nav" class="hidden">
  <label for="nav" class="nav-btn">
    <i></i>
    <i></i>
    <i></i>
  </label>
  <div class="logo">
    <a href="#">Logo</a>
  </div>
  <div class="nav-wrapper">
    <ul>
      <li><a href="#">Page 1</a></li>
      <li><a href="#">Page 2</a></li>
    </ul>
  </div>
</nav>

Também é possível alterar a cor linha superior do navbar, basta adicionar o nome da cor desejada como classe do elemento 


<nav class="simple-nav orange">
  ...
</nav>

Outra opção de Navbar

Abaixo é apresentada outra opção de barra de navegação que pode ser adicionada em seu projeto. Diferente da anterior, essa barra de navegação possui uma cor de fundo que a preenche totalmente. 



<nav class="navbar">
  <input type="checkbox" id="navbar-check">
  <div class="navbar-header">
    <div class="navbar-title">
      <a href="#">Logo</a>
    </div>
  </div>
  <div class="navbar-btn">
    <label for="navbar-check">
      <span></span>
      <span></span>
      <span></span>
    </label>
  </div>
  
  <div class="navbar-links">
    <a href="#">Page 1</a>
    <a href="#">Page 2</a>
  </div>
</nav>

Também é possível alterar a cor de fundo do navbar, basta adicionar o nome da cor desejada como classe do elemento 



<nav class="navbar blue">
  ...
</nav>