Navbar

Sobre Navbar

Navbar é um container utilizado para comportar a marca ou nome do site, a navegação principal, informações de usuário e menu de acesso rápido (funções transversais), como ajuda e notificações.

Como usar

 <nav class="navbar has-shadow">
  <div class="navbar-brand"> <!-- Container do nome da marca -->
    <a class="navbar-item">
      <span class="navbar-item has-text-weight-bold is-size-4">Meu Site</span>
    </a>
  </div>

  <div class="navbar-menu">
    <div class="navbar-start"> <!-- Container para o menu principal -->
      <a class="navbar-item">Item 1</a>
      <a class="navbar-item">Item 2</a>
      <a class="navbar-item">Item 3</a>
      <div class="navbar-item has-dropdown is-active">
        <a class="navbar-item">Item 4</a>
        <div class="navbar-dropdown is-boxed">
          <a class="navbar-item">Sub item 1</a>
          <a class="navbar-item">Sub item 2</a>
        </div>
      </div>
    </div>
    <div class="navbar-end"> <!-- Itens de acesso rápido -->
      <div class="navbar-item">
        <a href="#">
          <span class="icon has-text-info is-small">
            <i class="far fa-question-circle"></i>
          </span>
        </a>
      </div>
      <div class="navbar-item">
        <a href="#">
          <span class="icon has-text-primary is-small">
            <i class="far fa-bell"></i>
          </span>
        </a>
      </div>
      <div class="navbar-item">
        <div class="avatar is-primary">Z</div>
      </div>
    </div>
  </div>
</nav>

Marca (.navbar-brand)

Para a marca pode ser usado logotipo ou o nome do site e deve estar posicionado no lado esquerdo da Navbar.

<nav class="navbar has-shadow">
  <div class="navbar-brand"> <!-- Container do nome da marca -->
    <a class="navbar-item">
      <svg width="82px" height="30px" viewBox="0 0 82 30" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
      <defs>
        <polygon id="path-1" points="0 0.220748344 10.9323377 0.220748344 10.9323377 13.8474106 0 13.8474106"></polygon>
        <polygon id="path-3" points="0.0855183805 0.22069404 10.7567166 0.22069404 10.7567166 13.8476821 0.0855183805 13.8476821"></polygon>
      </defs>
      <g id="logo-zenvia-color" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <g id="Group-24">
          <polygon id="Fill-1" fill="#32BBED" points="70.420351 18.1730464 74.9626623 18.1730464 74.9626623 11.357543 70.420351 11.357543"></polygon>
          <polygon id="Fill-2" fill="#32BBED" points="63.6053907 11.3580861 70.4206225 11.3580861 70.4206225 6.81523179 63.6053907 6.81523179"></polygon>
          <polygon id="Fill-3" fill="#009BDF" points="70.420894 11.357543 74.9632053 11.357543 74.9632053 6.81523179 70.420894 6.81523179"></polygon>
          <polygon id="Fill-4" fill="#A05DA5" points="77.2347682 11.357543 81.7776225 11.357543 81.7776225 4.54339735 77.2347682 4.54339735"></polygon>
          <polygon id="Fill-5" fill="#A05DA5" points="70.4198623 -5.43046358e-05 70.4198623 4.54307152 77.2348225 4.54307152 77.2348225 0.000217218543"></polygon>
          <polygon id="Fill-6" fill="#6F2C91" points="77.2347682 4.54339735 81.7776225 4.54339735 81.7776225 0.000543046358 77.2347682 0.000543046358"></polygon>
          <g id="Group-23" transform="translate(0.000000, 11.339623)">
            <path d="M29.6208709,4.56509205 L23.8053874,4.56509205 L23.8053874,18.1920258 L27.5306854,18.1920258 L27.5306854,7.23036358 L29.1397318,7.23036358 C30.835394,7.23036358 31.5505861,7.93170795 31.8650099,8.87878079 C32.1826921,9.8359 32.2038709,11.3814099 32.2038709,12.5910457 L32.2038709,18.1920258 L35.9297119,18.1920258 L35.9297119,11.0938669 C35.9169503,9.67597285 35.6956589,8.17743642 34.9603742,7.00445629 C34.3057318,5.90071457 32.885394,4.56509205 29.6208709,4.56509205" id="Fill-7" fill="#000000"></path>
            <path d="M50.0922252,2.50309073 C50.0922252,3.0111106 50.5068411,3.42626954 51.015404,3.42626954 L53.8061192,3.42654106 L53.8061192,0.0186536424 L50.0922252,0.0202827815 L50.0922252,2.50309073 Z" id="Fill-9" fill="#000000"></path>
            <path d="M52.8827775,4.56536358 L50.0923338,4.56509205 L50.0923338,18.1920258 L53.8059563,18.1920258 L53.8059563,5.49994636 C53.8059563,4.98540993 53.3913404,4.56509205 52.8827775,4.56536358" id="Fill-11" fill="#000000"></path>
            <path d="M45.3076881,5.44463709 L42.6665821,12.8490742 L40.0260192,5.44463709 C39.8538735,4.96078278 39.2969795,4.56517351 38.7895026,4.56517351 L35.6952245,4.56517351 L41.195198,18.1918358 L43.9867278,18.1918358 L49.1711914,4.56544503 L46.5436616,4.56544503 C46.0364563,4.56517351 45.4798338,4.96078278 45.3076881,5.44463709" id="Fill-13" fill="#000000"></path>
            <path d="M21.1561901,6.10886424 C19.8786735,4.44252649 17.5275543,4.35020861 16.0059384,4.49954636 C14.5076735,4.64834106 12.9597199,5.3399106 12.0566338,6.78875828 C11.1771702,8.17108278 10.9197662,9.98540066 10.9936205,11.6788907 C11.0085543,13.3047715 11.4638987,15.0392616 12.4916139,16.2440099 C13.6385278,17.6263344 15.4205344,18.1919172 17.9867,18.1919172 L21.7665742,18.1919172 L21.5156868,16.2138709 C21.465455,15.8177185 21.1018854,15.4935199 20.7068192,15.4935199 L18.5112828,15.494606 C15.9950775,15.494606 14.8201967,14.5456325 14.7878854,12.5464073 L22.4293623,12.5464073 C22.4293623,9.67287748 22.4339781,7.7765596 21.1561901,6.10886424 Z M14.7612762,10.1757384 C14.7479715,9.35003642 14.9163159,8.46785762 15.3265874,7.79067881 C16.0882099,6.53461258 17.9391834,6.63969205 18.5587993,7.96771192 C18.9090642,8.64461921 19.0038258,9.43040728 19.0510709,10.1757384 L14.7612762,10.1757384 Z" id="Fill-15" fill="#000000"></path>
            <g id="Group-19" transform="translate(0.000000, 4.344371)">
              <mask id="mask-2" fill="white">
                  <use xlink:href="#path-1"></use>
              </mask>
              <g id="Clip-18"></g>
              <path d="M9.87258278,11.1490132 L4.88850331,11.151457 C4.88850331,10.876947 5.06336424,10.6187285 5.16382781,10.4693907 C5.26456291,10.3197815 10.3186954,2.95009934 10.3186954,2.95009934 C11.3488543,1.44857616 10.8128675,0.220748344 9.12806623,0.220748344 L6.06501325,0.220748344 L0.270437086,0.220748344 L0.517251656,2.16621192 C0.567211921,2.56290728 0.93105298,2.88710596 1.32557616,2.88710596 L5.97513907,2.88710596 C5.97513907,3.16134437 5.81656954,3.38317881 5.69954305,3.56455629 C5.58224503,3.7462053 0.523768212,11.1177881 0.523768212,11.1177881 C-0.506119205,12.6190397 0.0301390728,13.8474106 1.7149404,13.8474106 L4.77745033,13.8474106 L10.9323377,13.8474106 L10.6814503,11.8693642 C10.6314901,11.4732119 10.267106,11.1490132 9.87258278,11.1490132" id="Fill-17" fill="#000000" mask="url(#mask-2)"></path>
            </g>
            <g id="Group-22" transform="translate(55.119205, 4.344371)">
              <mask id="mask-4" fill="white">
                  <use xlink:href="#path-3"></use>
              </mask>
              <g id="Clip-21"></g>
              <path d="M9.2261404,1.6247404 C8.01188874,0.466150993 6.69608742,0.22069404 5.38571656,0.22069404 L1.41794834,0.22069404 L1.67372318,2.15828344 C1.72639868,2.55443576 2.09241192,2.88623709 2.48747815,2.88623709 L5.31892185,2.88732318 C6.04008742,2.88732318 6.67327947,3.2191245 6.99992185,3.80507152 C7.28013377,4.35083311 7.36267682,5.0043894 7.32765033,5.63160795 C6.36971656,5.56345563 5.41178278,5.59060795 4.45412053,5.61776026 C3.26321987,5.68672715 1.95502119,5.87733642 1.03211391,6.84477351 C0.167312583,7.77229669 -0.0184092715,9.25752848 0.133372185,10.5524225 C0.226504636,11.5747073 0.72909404,12.5562636 1.52275629,13.0466344 C2.66776954,13.7691576 4.10901457,13.8478993 5.27167682,13.8478993 L10.7567166,13.8478993 L10.7567166,5.68102517 C10.7567166,4.21072715 10.3247232,2.6603298 9.2261404,1.6247404 Z M7.33308079,11.1514026 L5.51224636,11.1514026 C4.60237219,11.1514026 3.97868344,10.9857735 3.71557748,10.3810914 C3.53528609,9.82908477 3.52198146,9.19236291 3.69086887,8.65366093 C3.90455762,8.06228344 4.47855762,7.85375364 4.98549139,7.82605828 C5.7329947,7.78478675 7.33308079,7.79972053 7.33308079,7.79972053 L7.33308079,11.1514026 Z" id="Fill-20" fill="#000000" mask="url(#mask-4)"></path>
            </g>
          </g>
        </g>
      </g>
    </svg>
  </a>
</div>
</nav>

Menu global (.navbar-menu)

<nav class="navbar has-shadow">
  <div class="navbar-brand">
    <span class="navbar-item has-text-weight-bold is-size-4">Meu Site</span>
  </div>
  <div class="navbar-menu">
    <div class="navbar-start"> <!-- Itens do menu --> </div>
    <div class="navbar-end"> <!-- Itens de acesso imediato --> </div>
  </div>
</nav>

Contexto do usuário (.navbar-menu)

Use o Avatar junto de um .navbar-item, dentro do menu de acesso rápido.

<nav class="navbar has-shadow">
  <div class="navbar-brand">
    <span class="navbar-item has-text-weight-bold is-size-4">Meu Site</span>
  </div>
  <div class="navbar-menu">
    <div class="navbar-start"> <!-- Itens do menu --> </div>
    <div class="navbar-end">
      <div class="navbar-item has-dropdown is-hoverable">
        <div class="navbar-link">
          <div class="avatar is-dark">Z</div>
        </div>
        <div class="navbar-dropdown is-boxed is-right">
          <a class="navbar-item">Preferências</a>
          <hr class="navbar-divider">
          <a class="navbar-item">Sair</a>
        </div>
      </div>
    </div>
  </div>
</nav>

Diretrizes de design