donavinhannon / bulma-navbar

Responsive navbar from bulma.io translated to scss and stripped of many color classes.

Bulma Navbar

Responsive navbar from bulma.io translated to scss and stripped of many color classes.

Install

HTML

<nav class="navbar has-shadow" role="navigation" aria-label="main navigation">
  <div class="container">
    
    <!-- logo or branding image on left side -->
    <div class="navbar-brand">
      <a class="navbar-item" href="/">
        <img src="https://bulma.io/images/bulma-logo.png" alt="Bulma: a modern CSS framework based on Flexbox" width="112" height="28">
      </a>
      <div class="navbar-burger"  data-target="navbar-menu">
        <span></span>
        <span></span>
        <span></span>
      </div>
    </div>

    <!-- children of navbar-menu must be navbar-start and/or navbar-end -->
    <div class="navbar-menu" id="navbar-menu">
      <!-- navbar items | left side -->
      <div class="navbar-start">
        <div class="navbar-item has-dropdown is-hoverable">
            <a class="navbar-link">Docs</a>
            <div class="navbar-dropdown">
              <a class="navbar-item" href="#">Overview</a>
              <a class="navbar-item" href="#">Elements</a>
              <a class="navbar-item" href="#">Components</a>
              <hr class="navbar-divider">
              <div class="navbar-item"> Version 0.1.0</div>
            </div>
          </div>
      </div>

      <!-- navbar items | right side -->
      <div class="navbar-end">
        <a class="navbar-item is-active" href="/"> Home</a>
        <a class="navbar-item" href="#">About</a>
        <a class="navbar-item" href="#">Projects</a>
        <a class="navbar-item" href="#">Contact</a>
      </div>

    </div>
  </div>
</nav>

CSS

JS (inline)

<!-- Bulma Navbar JS -->
  <script>
    document.addEventListener('DOMContentLoaded', function () {

      // Get all "navbar-burger" elements
      var $navbarBurgers = Array.prototype.slice.call(document.querySelectorAll('.navbar-burger'), 0);

      // Check if there are any navbar burgers
      if ($navbarBurgers.length > 0) {

        // Add a click event on each of them
        $navbarBurgers.forEach(function ($el) {
          $el.addEventListener('click', function () {

            // Get the target from the "data-target" attribute
            var target = $el.dataset.target;
            var $target = document.getElementById(target);

            // Toggle the class on both the "navbar-burger" and the "navbar-menu"
            $el.classList.toggle('is-active');
            $target.classList.toggle('is-active');

          });
        });
      }

    });
  </script>