Add top bottom navbar toggle

docs/_includes/examples/navbar-bottom.html

@@ -0,0 +1,74 @@
+<nav id="navbarBottom" class="navbar is-fixed-bottom has-shadow is-hidden">
+  <div class="navbar-brand">
+    <a class="navbar-item" href="{{ site.url }}">
+      <img src="{{ site.url }}/images/bulma-logo.png" alt="Bulma: a modern CSS framework based on Flexbox" width="112" height="28">
+    </a>
+    <div class="navbar-burger burger" data-target="navbarExample{{ include.id }}">
+      <span></span>
+      <span></span>
+      <span></span>
+    </div>
+  </div>
+
+  <div id="navbarExample{{ include.id }}" class="navbar-menu">
+    <div class="navbar-start">
+      <a class="navbar-item" href="{{ site.url }}/">
+        Home
+      </a>
+      <div class="navbar-item has-dropdown has-dropdown-up is-hoverable">
+        <a class="navbar-link" href="/documentation/overview/start/">
+          Docs
+        </a>
+        <div class="navbar-dropdown">
+          <a class="navbar-item" href="/documentation/overview/start/">
+            Overview
+          </a>
+          <a class="navbar-item" href="{{ site.url }}/documentation/modifiers/syntax/">
+            Modifiers
+          </a>
+          <a class="navbar-item" href="{{ site.url }}/documentation/columns/basics/">
+            Columns
+          </a>
+          <a class="navbar-item" href="{{ site.url }}/documentation/layout/container/">
+            Layout
+          </a>
+          <a class="navbar-item" href="{{ site.url }}/documentation/form/general/">
+            Form
+          </a>
+          <hr class="navbar-divider">
+          <a class="navbar-item" href="{{ site.url }}/documentation/elements/box/">
+            Elements
+          </a>
+          <a class="navbar-item is-active" href="{{ site.url }}/documentation/components/breadcrumb/">
+            Components
+          </a>
+        </div>
+      </div>
+    </div>
+
+    <div class="navbar-end">
+      <div class="navbar-item">
+        <div class="field is-grouped">
+          <p class="control">
+            <a class="bd-tw-button button" data-social-network="Twitter" data-social-action="tweet" data-social-target="http://localhost:4000" target="_blank" href="https://twitter.com/intent/tweet?text=Bulma: a modern CSS framework based on Flexbox&amp;hashtags=bulmaio&amp;url=http://localhost:4000&amp;via=jgthms">
+              <span class="icon">
+                <i class="fa fa-twitter"></i>
+              </span>
+              <span>
+                Tweet
+              </span>
+            </a>
+          </p>
+          <p class="control">
+            <a class="button is-primary" href="https://github.com/jgthms/bulma/archive/0.5.1.zip">
+              <span class="icon">
+                <i class="fa fa-download"></i>
+              </span>
+              <span>Download</span>
+            </a>
+          </p>
+        </div>
+      </div>
+    </div>
+  </div>
+</nav>

docs/_includes/examples/navbar.html

@@ -0,0 +1,74 @@
+<nav class="navbar{% if include.transparent %} is-transparent{% endif %}">
+  <div class="navbar-brand">
+    <a class="navbar-item" href="{{ site.url }}">
+      <img src="{{ site.url }}/images/bulma-logo.png" alt="Bulma: a modern CSS framework based on Flexbox" width="112" height="28">
+    </a>
+    <div class="navbar-burger burger" data-target="navbarExample{{ include.id }}">
+      <span></span>
+      <span></span>
+      <span></span>
+    </div>
+  </div>
+
+  <div id="navbarExample{{ include.id }}" class="navbar-menu">
+    <div class="navbar-start">
+      <a class="navbar-item" href="{{ site.url }}/">
+        Home
+      </a>
+      <div class="navbar-item has-dropdown is-hoverable">
+        <a class="navbar-link" href="/documentation/overview/start/">
+          Docs
+        </a>
+        <div class="navbar-dropdown{% if include.boxed %} is-boxed{% endif %}">
+          <a class="navbar-item" href="/documentation/overview/start/">
+            Overview
+          </a>
+          <a class="navbar-item" href="{{ site.url }}/documentation/modifiers/syntax/">
+            Modifiers
+          </a>
+          <a class="navbar-item" href="{{ site.url }}/documentation/columns/basics/">
+            Columns
+          </a>
+          <a class="navbar-item" href="{{ site.url }}/documentation/layout/container/">
+            Layout
+          </a>
+          <a class="navbar-item" href="{{ site.url }}/documentation/form/general/">
+            Form
+          </a>
+          <hr class="navbar-divider">
+          <a class="navbar-item" href="{{ site.url }}/documentation/elements/box/">
+            Elements
+          </a>
+          <a class="navbar-item is-active" href="{{ site.url }}/documentation/components/breadcrumb/">
+            Components
+          </a>
+        </div>
+      </div>
+    </div>
+
+    <div class="navbar-end">
+      <div class="navbar-item">
+        <div class="field is-grouped">
+          <p class="control">
+            <a class="bd-tw-button button" data-social-network="Twitter" data-social-action="tweet" data-social-target="http://localhost:4000" target="_blank" href="https://twitter.com/intent/tweet?text=Bulma: a modern CSS framework based on Flexbox&amp;hashtags=bulmaio&amp;url=http://localhost:4000&amp;via=jgthms">
+              <span class="icon">
+                <i class="fa fa-twitter"></i>
+              </span>
+              <span>
+                Tweet
+              </span>
+            </a>
+          </p>
+          <p class="control">
+            <a class="button is-primary" href="https://github.com/jgthms/bulma/archive/0.5.1.zip">
+              <span class="icon">
+                <i class="fa fa-download"></i>
+              </span>
+              <span>Download</span>
+            </a>
+          </p>
+        </div>
+      </div>
+    </div>
+  </div>
+</nav>

docs/_includes/footer.html

@@ -122,6 +122,9 @@
 {% if page.route == 'index' %}
   <script src="https://player.vimeo.com/api/player.js"></script>
   <script type="text/javascript" src="{{ site.url }}/lib/index.js"></script>
+{% elsif page.doc-subtab == 'navbar' %}
+  {% include examples/navbar-bottom.html %}
+  <script type="text/javascript" src="{{ site.url }}/lib/navbar.js"></script>
 {% endif %}
 
 <div id="fb-root"></div>

docs/_includes/navbar.html

@@ -1,4 +1,4 @@
-<nav class="navbar {% if include.fixed %}is-fixed-top has-shadow{% endif %} {% if include.transparent %}is-transparent{% endif %}">
+<nav id="navbar" class="navbar {% if include.fixed %}is-fixed-top has-shadow{% endif %} {% if include.transparent %}is-transparent{% endif %}">
   {% if include.has_container %}
     <div class="container">
   {% endif %}

docs/_javascript/navbar.js

@@ -0,0 +1,45 @@
+document.addEventListener('DOMContentLoaded', () => {
+
+  const rootEl = document.documentElement;
+  const navbarTopEl = document.getElementById('navbar');
+  const navbarBottomEl = document.getElementById('navbarBottom');
+  const fixTopEl = document.getElementById('navbarFixTop');
+  const fixTopElIcon = fixTopEl.querySelector('.fa');
+  const fixBottomEl = document.getElementById('navbarFixBottom');
+  const fixBottomElIcon = fixBottomEl.querySelector('.fa');
+  let fixedTop = false;
+  let fixedBottom = false;
+
+  fixTopEl.addEventListener('click', event => {
+    fixedTop = !fixedTop;
+
+    if (fixedTop) {
+      fixTopEl.className = 'button is-success';
+      fixTopElIcon.className = 'fa fa-check-square-o';
+      rootEl.classList.add('has-navbar-fixed-top');
+      navbarTopEl.classList.add('is-fixed-top', 'has-shadow');
+    } else {
+      fixTopEl.className = 'button is-link';
+      fixTopElIcon.className = 'fa fa-square-o';
+      rootEl.classList.remove('has-navbar-fixed-top');
+      navbarTopEl.classList.remove('is-fixed-top', 'has-shadow');
+    }
+  });
+
+  fixBottomEl.addEventListener('click', event => {
+    fixedBottom = !fixedBottom;
+
+    if (fixedBottom) {
+      fixBottomEl.className = 'button is-success';
+      fixBottomElIcon.className = 'fa fa-check-square-o';
+      rootEl.classList.add('has-navbar-fixed-bottom');
+      navbarBottomEl.classList.remove('is-hidden');
+    } else {
+      fixBottomEl.className = 'button is-link';
+      fixBottomElIcon.className = 'fa fa-square-o';
+      rootEl.classList.remove('has-navbar-fixed-bottom');
+      navbarBottomEl.classList.add('is-hidden');
+    }
+  });
+
+});

docs/_layouts/documentation.html

@@ -3,9 +3,7 @@ layout: default
 route: documentation
 ---
 
-<div class="container">
-  {% include navbar.html id="Documentation" %}
-</div>
+{% include navbar.html id="Documentation" has_container=true %}
 
 <section class="hero is-link">
   <div class="hero-body">

docs/_sass/highlight.sass

@@ -128,4 +128,4 @@
   text-align: left
 
 .content li .highlight
-  margin: 0
+  margin-top: 0.5em

docs/css/bulma-docs.css

@@ -2987,6 +2987,7 @@ a.box:active {
   pointer-events: none;
   position: absolute;
   transform: rotate(-45deg);
+  transform-origin: center;
   width: 0.5em;
   margin-top: -0.375em;
   right: 1.125em;
@@ -6460,6 +6461,10 @@ a.dropdown-item.is-active {
   bottom: 0;
 }
 
+.navbar.is-fixed-bottom.has-shadow {
+  box-shadow: 0 -2px 3px rgba(10, 10, 10, 0.1);
+}
+
 .navbar.is-fixed-top {
   top: 0;
 }
@@ -6644,6 +6649,9 @@ a.navbar-item:hover, a.navbar-item.is-active,
   .navbar.is-fixed-bottom-touch {
     bottom: 0;
   }
+  .navbar.is-fixed-bottom-touch.has-shadow {
+    box-shadow: 0 -2px 3px rgba(10, 10, 10, 0.1);
+  }
   .navbar.is-fixed-top-touch {
     top: 0;
   }
@@ -6693,6 +6701,17 @@ a.navbar-item:hover, a.navbar-item.is-active,
   .navbar-item.has-dropdown {
     align-items: stretch;
   }
+  .navbar-item.has-dropdown-up .navbar-link::after {
+    transform: rotate(135deg) translate(0.25em, -0.25em);
+  }
+  .navbar-item.has-dropdown-up .navbar-dropdown {
+    border-bottom: 1px solid #dbdbdb;
+    border-radius: 5px 5px 0 0;
+    border-top: none;
+    bottom: 100%;
+    box-shadow: 0 -8px 8px rgba(10, 10, 10, 0.1);
+    top: auto;
+  }
   .navbar-item.is-active .navbar-dropdown, .navbar-item.is-hoverable:hover .navbar-dropdown {
     display: block;
   }
@@ -6711,6 +6730,7 @@ a.navbar-item:hover, a.navbar-item.is-active,
     pointer-events: none;
     position: absolute;
     transform: rotate(-45deg);
+    transform-origin: center;
     width: 0.5em;
     margin-top: -0.375em;
     right: 1.125em;
@@ -6793,6 +6813,9 @@ a.navbar-item:hover, a.navbar-item.is-active,
   .navbar.is-fixed-bottom-desktop {
     bottom: 0;
   }
+  .navbar.is-fixed-bottom-desktop.has-shadow {
+    box-shadow: 0 -2px 3px rgba(10, 10, 10, 0.1);
+  }
   .navbar.is-fixed-top-desktop {
     top: 0;
   }
@@ -9778,7 +9801,7 @@ label.panel-block:hover {
 }
 
 .content li .highlight {
-  margin: 0;
+  margin-top: 0.5em;
 }
 
 .content .highlighter-rouge:not(:last-child) {

docs/documentation/components/navbar.html

@@ -8,7 +8,7 @@ doc-subtab: navbar
 {% include subnav-components.html %}
 
 {% capture navbar_example %}
-{% include navbar.html id="bd-example" %}
+{% include examples/navbar.html id="Default" %}
 {% endcapture %}
 
 {% capture navbar_brand_example %}
@@ -132,7 +132,7 @@ doc-subtab: navbar
 {% endcapture %}
 
 {% capture navbar_transparent_example %}
-{% include navbar.html transparent=true boxed=true id="TransparentExample" %}
+{% include examples/navbar.html transparent=true boxed=true id="TransparentExample" %}
 {% endcapture %}
 
 {% capture navbar_dropdown_example %}
@@ -751,6 +751,43 @@ document.addEventListener('DOMContentLoaded', function () {
 
     {% include snippet.html content=navbar_transparent_example paddingless=true horizontal=true more=true %}
 
+    {% include anchor.html name="Fixed navbar" %}
+
+    {% include elements/new-tag.html version="0.6.1" %}
+
+    <div class="content">
+      <p>
+        You can now <strong>fix</strong> the navbar to either the <strong>top</strong> or <strong>bottom</strong> of the page. This is a 2-step process:
+      </p>
+      <ul>
+        <li>
+          Add either <code>is-fixed-top</code> or <code>is-fixed-bottom</code> to the <code>navbar</code> component
+          {% highlight html %}<nav class="navbar is-fixed-top">{% endhighlight %}
+        </li>
+        <li>
+          Add the corresponding <code>has-navbar-fixed-top</code> or <code>has-navbar-fixed-bottom</code> modifier to the <code>&lt;html&gt;</code> element to provide the appropriate padding to the page
+          {% highlight html %}<html class="has-navbar-fixed-top">{% endhighlight %}
+        </li>
+      </ul>
+    </div>
+
+    <h4 class="title is-5">Try it out!</h4>
+
+    <div id="navbarToggles" class="buttons">
+      <a id="navbarFixTop" class="button is-link">
+        <span class="icon">
+          <i class="fa fa-square-o"></i>
+        </span>
+        <span>Fix top navbar</span>
+      </a>
+      <a id="navbarFixBottom" class="button is-link">
+        <span class="icon">
+          <i class="fa fa-square-o"></i>
+        </span>
+        <span>Show bottom navbar</span>
+      </a>
+    </div>
+
     {% include anchor.html name="Dropdown menu" %}
 
     <div class="content">

docs/index.html

@@ -4,7 +4,7 @@ route: index
 fixed_navbar: true
 ---
 
-{% include navbar.html id="Index" boxed=true fixed=true has_container=true %}
+{% include navbar.html id="Index" fixed=true has_container=true %}
 
 {% include index/intro.html %}
 

docs/lib/navbar.js

@@ -0,0 +1,46 @@
+'use strict';
+
+document.addEventListener('DOMContentLoaded', function () {
+
+  var rootEl = document.documentElement;
+  var navbarTopEl = document.getElementById('navbar');
+  var navbarBottomEl = document.getElementById('navbarBottom');
+  var fixTopEl = document.getElementById('navbarFixTop');
+  var fixTopElIcon = fixTopEl.querySelector('.fa');
+  var fixBottomEl = document.getElementById('navbarFixBottom');
+  var fixBottomElIcon = fixBottomEl.querySelector('.fa');
+  var fixedTop = false;
+  var fixedBottom = false;
+
+  fixTopEl.addEventListener('click', function (event) {
+    fixedTop = !fixedTop;
+
+    if (fixedTop) {
+      fixTopEl.className = 'button is-success';
+      fixTopElIcon.className = 'fa fa-check-square-o';
+      rootEl.classList.add('has-navbar-fixed-top');
+      navbarTopEl.classList.add('is-fixed-top', 'has-shadow');
+    } else {
+      fixTopEl.className = 'button is-link';
+      fixTopElIcon.className = 'fa fa-square-o';
+      rootEl.classList.remove('has-navbar-fixed-top');
+      navbarTopEl.classList.remove('is-fixed-top', 'has-shadow');
+    }
+  });
+
+  fixBottomEl.addEventListener('click', function (event) {
+    fixedBottom = !fixedBottom;
+
+    if (fixedBottom) {
+      fixBottomEl.className = 'button is-success';
+      fixBottomElIcon.className = 'fa fa-check-square-o';
+      rootEl.classList.add('has-navbar-fixed-bottom');
+      navbarBottomEl.classList.remove('is-hidden');
+    } else {
+      fixBottomEl.className = 'button is-link';
+      fixBottomElIcon.className = 'fa fa-square-o';
+      rootEl.classList.remove('has-navbar-fixed-bottom');
+      navbarBottomEl.classList.add('is-hidden');
+    }
+  });
+});

sass/components/navbar.sass

@@ -104,6 +104,8 @@ $navbar-divider-background-color: $border !default
     +navbar-fixed
   &.is-fixed-bottom
     bottom: 0
+    &.has-shadow
+      box-shadow: 0 -2px 3px rgba($black, 0.1)
   &.is-fixed-top
     top: 0
 
@@ -216,6 +218,8 @@ a.navbar-item,
       +navbar-fixed
     &.is-fixed-bottom-touch
       bottom: 0
+      &.has-shadow
+        box-shadow: 0 -2px 3px rgba($black, 0.1)
     &.is-fixed-top-touch
       top: 0
   html.has-navbar-fixed-top-touch
@@ -260,6 +264,16 @@ a.navbar-item,
   .navbar-item
     &.has-dropdown
       align-items: stretch
+    &.has-dropdown-up
+      .navbar-link::after
+        transform: rotate(135deg) translate(0.25em, -0.25em)
+      .navbar-dropdown
+        border-bottom: $navbar-dropdown-border-top
+        border-radius: $navbar-dropdown-radius $navbar-dropdown-radius 0 0
+        border-top: none
+        bottom: 100%
+        box-shadow: 0 -8px 8px rgba($black, 0.1)
+        top: auto
     &.is-active,
     &.is-hoverable:hover
       .navbar-dropdown
@@ -336,6 +350,8 @@ a.navbar-item,
       +navbar-fixed
     &.is-fixed-bottom-desktop
       bottom: 0
+      &.has-shadow
+        box-shadow: 0 -2px 3px rgba($black, 0.1)
     &.is-fixed-top-desktop
       top: 0
   html.has-navbar-fixed-top-desktop

sass/utilities/mixins.sass

@@ -10,6 +10,7 @@
   pointer-events: none
   position: absolute
   transform: rotate(-45deg)
+  transform-origin: center
   width: 0.5em
 
 =block