Modèles de barre de navigation

1°

Code :

<div class="container is-fluid">

    <nav class="navbar">
      <div class="container">
        <div class="navbar-brand">
           <a class="navbar-item" href="#">Pied Piper</a>
           <a class="navbar-burger" role="button" aria-label="menu" aria-expanded="false">
           <span aria-hidden="true"></span>
           <span aria-hidden="true"></span>
           <span aria-hidden="true"></span>
           </a>
        </div>
        <div class="navbar-menu">
          <div class="navbar-start">
             <a class="navbar-item" href="#">Features</a>
             <a class="navbar-item" href="#">Enterprise</a>
             <a class="navbar-item" href="#">Support</a>
          <div class="navbar-item has-dropdown is-hoverable">
             <a class="navbar-link">ICO</a>
          <div class="navbar-dropdown">
             <a class="navbar-item navbar-item-dropdown" href="#">Whitepaper</a>
             <a class="navbar-item navbar-item-dropdown" href="#">Token</a>
         </div>
         </div>
         </div>
          <div class="navbar-end">
            <div class="navbar-item">
              <div class="buttons">
                 <a class="button is-light" href="#">Log in</a>
                 <a class="button is-primary" href="#">Sign up</a></div>
            </div>
          </div>
        </div>
      </div>
    </nav>
  </div>

---

2°

Code :

 <div class="container is-fluid">
    <nav class="navbar">
      <div class="container">
        <div class="navbar-menu">
          <div class="navbar-start"></div>
          <div class="navbar-brand"><a class="navbar-item" href="#">Pied Piper</a></div>
          <div class="navbar-end"></div>
        </div>
      </div>
    </nav>
  </div>

---

3°

Code :

<div class="container is-fluid">
    <nav class="navbar">
      <div class="container">
        <div class="navbar-brand"><a class="navbar-item" href="#">Pied Piper</a><a 
           class="navbar-burger" role="button"
            aria-label="menu" aria-expanded="false"><span aria-hidden="true"></span>
           <span aria-hidden="true"></span><span aria-hidden="true"></span></a></div>
        <div class="navbar-menu">
          <div class="navbar-start"><a class="navbar-item" href="#">Features</a>
           <a class="navbar-item"
             href="#">Enterprise</a><a class="navbar-item" href="#">Support</a>
            <div class="navbar-item has-dropdown is-hoverable"><a class="navbar-link">ICO</a>
              <div class="navbar-dropdown"><a class="navbar-item navbar-item-dropdown"
                       href="#">Whitepaper</a><a
                  class="navbar-item navbar-item-dropdown" href="#">Token</a></div>
            </div>
          </div>
          <div class="navbar-end">
            <div class="navbar-item has-dropdown is-hoverable"><a class="navbar-link">Profile</a>
              <div class="navbar-dropdown"><a class="navbar-item" href="#">
                              Account settings</a><a class="navbar-item"
                  href="#">Logout</a></div>
            </div>
          </div>
        </div>
      </div>
    </nav>
  </div>

---

4°

Code :

<div class="container is-fluid">
    <nav class="navbar">
      <div class="container">
        <div class="navbar-brand"><a class="navbar-item" href="#">Pied Piper</a>
              <a class="navbar-burger" role="button"
            aria-label="menu" aria-expanded="false"><span aria-hidden="true"></span>
             <span
              aria-hidden="true"></span><span aria-hidden="true"></span></a></div>
        <div class="navbar-menu">
          <div class="navbar-start"><a class="navbar-item" href="#">Features</a>
             <a class="navbar-item"
              href="#">Enterprise</a><a class="navbar-item" href="#">Support</a>
            <div class="navbar-item has-dropdown is-hoverable"><a class="navbar-link">
               ICO</a>
              <div class="navbar-dropdown"><a class="navbar-item navbar-item-dropdown" 
                  href="#">Whitepaper</a><a
                  class="navbar-item navbar-item-dropdown" href="#">Token</a></div>
            </div>
          </div>
          <div class="navbar-end">
            <div class="navbar-item">
              <input class="input" type="text" placeholder="Search">
            </div>
          </div>
        </div>
      </div>
    </nav>
  </div>

---

5°

Code :

<div class="container is-fluid">
    <nav class="navbar">
      <div class="container">
        <div class="navbar-brand is-active"><a class="navbar-item" href="#">Pied Piper</a>
           <a class="navbar-burger"
            role="button" aria-label="menu" aria-expanded="false"><span aria-hidden="true">
              </span><span
              aria-hidden="true"></span><span aria-hidden="true"></span></a></div>
        <div class="navbar-menu">
          <div class="navbar-end"><a class="navbar-item" href="#">Features</a><a class="navbar-item"
              href="#">Enterprise</a><a class="navbar-item" href="#">Support</a>
            <div class="navbar-item has-dropdown is-hoverable"><a class="navbar-link">ICO</a>
              <div class="navbar-dropdown"><a class="navbar-item navbar-item-dropdown" href="#">
                  Whitepaper</a><a
                  class="navbar-item navbar-item-dropdown" href="#">Token</a></div>
            </div>
          </div>
          <div>
            <div class="navbar-item"><a class="button is-primary" href="#">Sign up</a></div>
          </div>
        </div>
      </div>
    </nav>
  </div>

---