Official JsFiddle Foundation 5.2.3

by DannyEnglander

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/foundation/5.2.3/js/vendor/modernizr.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/foundation/5.2.3/css/foundation.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/foundation/5.2.3/js/foundation.min.js"></script>
<div class="off-canvas-wrap" data-offcanvas="">
  <div class="inner-wrap">
    <nav class="tab-bar">
      <section class="left-small">
        <a class="left-off-canvas-toggle menu-icon" href="#"><span></span></a>
      </section>

      <section class="middle tab-bar-section">
        <h1 class="title">Forest School - PARS Insight</h1>
      </section>
    </nav>

    <aside class="left-off-canvas-menu">
      <ul class="off-canvas-list">
        <li><label>General</label></li>
        <li><a href="#">Snapshot</a></li>
        <li><a href="#">Timetable</a></li>
        <li><a href="#">Homework</a></li>
      </ul>
    </aside>


  <a class="exit-off-canvas"></a>

  </div>
</div>

CSS

.off-canvas-wrap, .inner-wrap {
    min-height: 100%;
}

.off-canvas-wrap{  
    height: 100%;
    overflow-y: auto;
}

JavaScript

$(document).foundation();