Update layout for new stickiness

diff --git a/docs/layout/default.html b/docs/layout/default.html
index 9e4931f7d33294bbcd895464556d3b7d154ee2a2..d9361781614ebf07f1f3126d6c8a3cd744ca59b1 100644 (file)
--- a/docs/layout/default.html
+++ b/docs/layout/default.html
@@ -34,26 +34,29 @@
 
     {{> off-canvi}}
 
-    <div class="off-canvas-content" data-off-canvas-content>
+    <div class="docs-off-canvas-content off-canvas-content" data-off-canvas-content>
       <!-- Info Banner For Announcements or Links -->
       <!-- <a href="http://zurb.com/article/1416/foundation-6-is-here" id="notice">
         <div class="info">
           <h5>Foundation 6 is here!</h5>
         </div>
       </a> -->
-
-      {{> navigation}}
-      {{> mobile-navigation}}
-      {{> search-bar}}
+      <div class="docs-sticky-top-bar">
+        {{> navigation}}
+        {{> mobile-navigation}}
+        {{> search-bar}}
+      </div>
 
 
       <div class="collapse expanded row">
-        <div class="small-12 medium-9 large-10 medium-push-3 large-push-2 columns">
+        <div id="body-container" class="small-12 medium-9 large-10 medium-push-3 large-push-2 columns">
 <!-- do not indent -->
 {{> body}}
         </div>
-        <div class="medium-3 large-2 medium-pull-9 large-pull-10 hide-for-small-only columns">
-          {{> component-list}}
+        <div class="medium-3 large-2 medium-pull-9 large-pull-10 hide-for-small-only columns" data-sticky-container>
+          <div class="docs-nav-container" data-sticky data-anchor="body-container">
+            {{> component-list}}
+          </div>
         </div>
       </div>
 

diff --git a/docs/partials/component-list.html b/docs/partials/component-list.html
index 3db97e9f6a14c49c57d8f526b085ce85c2e4ca8e..3f3545b6be35a19c9f58e5b0122e9c63a4e013e5 100644 (file)
--- a/docs/partials/component-list.html
+++ b/docs/partials/component-list.html
@@ -1,177 +1,177 @@
-<div class="vertical menu docs-nav" id="docs-menu">
-
-<!--
-  <ul class="docs-nav-version-container">
-    <li class="docs-nav-version">
-      <a href="https://github.com/zurb/foundation-sites/releases/" target="_blank">Changelog</a>
-    </li>
-  </ul>
--->
-
-
-  <ul class="accordion docs-nav-category" data-accordion>
-    <li class="accordion-item {{#ifpage 'index' 'installation' 'starter-projects' 'accessibility' 'kitchen-sink'}}is-active{{/ifpage}}" data-accordion-item>
-      <a href="#" class="accordion-title">Getting Started</a>
-      <div class="accordion-content {{#ifpage 'index' 'installation' 'starter-projects' 'accessibility' 'kitchen-sink'}}is-active{{/ifpage}}" data-tab-content>
-        <ul class="docs-nav-subcategory">
-          <li{{#ifpage 'index'}} class="current"{{/ifpage}}><a href="index.html">Welcome</a></li>
-          <li{{#ifpage 'installation'}} class="current"{{/ifpage}}><a href="installation.html">Installation</a></li>
-          <li{{#ifpage 'starter-projects'}} class="current"{{/ifpage}}><a href="starter-projects.html">Starter Projects</a></li>
-          <li{{#ifpage 'compatibility'}} class="current"{{/ifpage}}><a href="compatibility.html">Compatibility</a></li>
-          <li{{#ifpage 'accessibility'}} class="current"{{/ifpage}}><a href="accessibility.html">Accessibility</a></li>
-          <li{{#ifpage 'kitchen-sink'}} class="current"{{/ifpage}}><a href="kitchen-sink.html">Kitchen Sink</a></li>
-        </ul>
-      </div>
-    </li>
-
-    <li class="accordion-item {{#ifpage 'global' 'rtl' 'flexbox' 'sass' 'javascript' 'javascript-utilities' 'media-queries'}}is-active{{/ifpage}}" data-accordion-item>
-      <a href="#" class="accordion-title">Setup</a>
-      <div class="accordion-content {{#ifpage 'global' 'rtl' 'flexbox' 'sass' 'javascript' 'javascript-utilities' 'media-queries'}}is-active{{/ifpage}}" data-tab-content>
-        <ul class="docs-nav-subcategory">
-          <li{{#ifpage 'global'}} class="current"{{/ifpage}}><a href="global.html">Global Styles</a></li>
-          <li{{#ifpage 'rtl'}} class="current"{{/ifpage}}><a href="rtl.html">Right-to-Left Support</a></li>
-          <li{{#ifpage 'flexbox'}} class="current"{{/ifpage}}><a href="flexbox.html">Flexbox</a></li>
-          <li{{#ifpage 'sass'}} class="current"{{/ifpage}}><a href="sass.html">Sass</a></li>
-          <li{{#ifpage 'javascript'}} class="current"{{/ifpage}}><a href="javascript.html">JavaScript</a></li>
-          <li{{#ifpage 'javascript-utilities'}} class="current"{{/ifpage}}><a href="javascript-utilities.html">JavaScript Utilities</a></li>
-          <li{{#ifpage 'media-queries'}} class="current"{{/ifpage}}><a href="media-queries.html">Media Queries</a></li>
-        </ul>
-      </div>
-    </li>
-
-    <li class="accordion-item {{#ifpage 'grid' 'flex-grid' 'forms' 'visibility' 'float-classes'}}is-active{{/ifpage}}" data-accordion-item>
-      <a href="#" class="accordion-title">General</a>
-      <div class="accordion-content {{#ifpage 'grid' 'flex-grid' 'forms' 'visibility' 'float-classes'}}is-active{{/ifpage}}" data-tab-content>
-        <ul class="docs-nav-subcategory">
-          <li{{#ifpage 'grid'}} class="current"{{/ifpage}}><a href="grid.html">Grid</a></li>
-          <li{{#ifpage 'flex-grid'}} class="current"{{/ifpage}}><a href="flex-grid.html">Flex Grid</a></li>
-          <li{{#ifpage 'forms'}} class="current"{{/ifpage}}><a href="forms.html">Forms</a></li>
-          <li{{#ifpage 'visibility'}} class="current"{{/ifpage}}><a href="visibility.html">Visibility Classes</a></li>
-          <li{{#ifpage 'float-classes'}} class="current"{{/ifpage}}><a href="float-classes.html">Float Classes</a></li>
-        </ul>
-      </div>
-    </li>
-
-    <li class="accordion-item {{#ifpage 'typography-base' 'typography-helpers'}}is-active{{/ifpage}}" data-accordion-item>
-      <a href="#" class="accordion-title">Typography</a>
-      <div class="accordion-content {{#ifpage 'typography-base' 'typography-helpers'}}is-active{{/ifpage}}" data-tab-content>
-        <ul class="docs-nav-subcategory">
-          <li{{#ifpage 'typography-base'}} class="current"{{/ifpage}}><a href="typography-base.html">Base Styles</a></li>
-          <li{{#ifpage 'typography-helpers'}} class="current"{{/ifpage}}><a href="typography-helpers.html">Helper Classes</a></li>
-        </ul>
-      </div>
-    </li>
-
-    <li class="accordion-item {{#ifpage 'button' 'button-group' 'close-button' 'slider' 'switch'}}is-active{{/ifpage}}" data-accordion-item>
-      <a href="#" class="accordion-title">Controls</a>
-      <div class="accordion-content {{#ifpage 'button' 'button-group' 'close-button' 'slider' 'switch'}}is-active{{/ifpage}}" data-tab-content>
-        <ul class="docs-nav-subcategory">
-          <li{{#ifpage 'button'}} class="current"{{/ifpage}}><a href="button.html">Button</a></li>
-          <li{{#ifpage 'button-group'}} class="current"{{/ifpage}}><a href="button-group.html">Button Group</a></li>
-          <li{{#ifpage 'close-button'}} class="current"{{/ifpage}}><a href="close-button.html">Close Button</a></li>
-          <li{{#ifpage 'slider'}} class="current"{{/ifpage}}><a href="slider.html">Slider <span class="label">JS</span></a></li>
-          <li{{#ifpage 'switch'}} class="current"{{/ifpage}}><a href="switch.html">Switch</a></li>
-        </ul>
-      </div>
-    </li>
-
-    <li class="accordion-item {{#ifpage 'navigation' 'menu' 'dropdown-menu' 'drilldown-menu' 'accordion-menu' 'top-bar' 'responsive-navigation' 'magellan' 'pagination' 'breadcrumbs'}}is-active{{/ifpage}}" data-accordion-item>
-      <a href="#" class="accordion-title">Navigation</a>
-      <div class="accordion-content {{#ifpage 'navigation' 'menu' 'dropdown-menu' 'drilldown-menu' 'accordion-menu' 'top-bar' 'responsive-navigation' 'magellan' 'pagination' 'breadcrumbs'}}is-active{{/ifpage}}" data-tab-content>
-        <ul class="docs-nav-subcategory">
-          <li{{#ifpage 'navigation'}} class="current"{{/ifpage}}><a href="navigation.html">Overview</a></li>
-          <li{{#ifpage 'menu'}} class="current"{{/ifpage}}><a href="menu.html">Menu</a></li>
-          <li{{#ifpage 'dropdown-menu'}} class="current"{{/ifpage}}><a href="dropdown-menu.html">Dropdown Menu <span class="label">JS</span></a></li>
-          <li{{#ifpage 'drilldown-menu'}} class="current"{{/ifpage}}><a href="drilldown-menu.html">Drilldown Menu <span class="label">JS</span></a></li>
-          <li{{#ifpage 'accordion-menu'}} class="current"{{/ifpage}}><a href="accordion-menu.html">Accordion Menu <span class="label">JS</span></a></li>
-          <li{{#ifpage 'top-bar'}} class="current"{{/ifpage}}><a href="top-bar.html">Top Bar</a></li>
-          <li{{#ifpage 'responsive-navigation'}} class="current"{{/ifpage}}><a href="responsive-navigation.html">Responsive Navigation</a></li>
-          <li{{#ifpage 'magellan'}} class="current"{{/ifpage}}><a href="magellan.html">Magellan <span class="label">JS</span></a></li>
-          <li{{#ifpage 'pagination'}} class="current"{{/ifpage}}><a href="pagination.html">Pagination</a></li>
-          <li{{#ifpage 'breadcrumbs'}} class="current"{{/ifpage}}><a href="breadcrumbs.html">Breadcrumbs</a></li>
-        </ul>
-      </div>
-    </li>
-
-    <li class="accordion-item {{#ifpage 'accordion' 'callout' 'card' 'dropdown' 'media-object' 'off-canvas' 'reveal' 'table' 'tabs' 'responsive-accordion-tabs'}}is-active{{/ifpage}}" data-accordion-item>
-      <a href="#" class="accordion-title">Containers</a>
-      <div class="accordion-content {{#ifpage 'accordion' 'callout' 'card' 'dropdown' 'media-object' 'off-canvas' 'reveal' 'table' 'tabs' 'responsive-accordion-tabs'}}is-active{{/ifpage}}" data-tab-content>
-        <ul class="docs-nav-subcategory">
-          <li{{#ifpage 'accordion'}} class="current"{{/ifpage}}><a href="accordion.html">Accordion <span class="label">JS</span></a></li>
-          <li{{#ifpage 'callout'}} class="current"{{/ifpage}}><a href="callout.html">Callout</a></li>
-          <li{{#ifpage 'card'}} class="current"{{/ifpage}}><a href="card.html">Card</a></li>
-          <li{{#ifpage 'dropdown'}} class="current"{{/ifpage}}><a href="dropdown.html">Dropdown <span class="label">JS</span></a></li>
-          <li{{#ifpage 'media-object'}} class="current"{{/ifpage}}><a href="media-object.html">Media Object</a></li>
-          <li{{#ifpage 'off-canvas'}} class="current"{{/ifpage}}><a href="off-canvas.html">Off-canvas <span class="label">JS</span></a></li>
-          <li{{#ifpage 'reveal'}} class="current"{{/ifpage}}><a href="reveal.html">Reveal <span class="label">JS</span> <small>Modal</small></a></li>
-          <li{{#ifpage 'table'}} class="current"{{/ifpage}}><a href="table.html">Table</a></li>
-          <li{{#ifpage 'tabs'}} class="current"{{/ifpage}}><a href="tabs.html">Tabs <span class="label">JS</span></a></li>
-          <li{{#ifpage 'responsive-accordion-tabs'}} class="current"{{/ifpage}}><a href="responsive-accordion-tabs.html">Responsive Accordion Tabs<span class="label">JS</span></a></li>
-        </ul>
-      </div>
-    </li>
-
-    <li class="accordion-item {{#ifpage 'badge' 'responsive-embed' 'label' 'orbit' 'progress-bar' 'thumbnail' 'tooltip'}}is-active{{/ifpage}}" data-accordion-item>
-      <a href="#" class="accordion-title">Media</a>
-      <div class="accordion-content {{#ifpage 'accordion' 'callout' 'card' 'dropdown' 'media-object' 'off-canvas' 'reveal' 'table' 'tabs' 'responsive-accordion-tabs'}}is-active{{/ifpage}}" data-tab-content>
-        <ul class="docs-nav-subcategory">
-          <li{{#ifpage 'badge'}} class="current"{{/ifpage}}><a href="badge.html">Badge</a></li>
-          <li{{#ifpage 'responsive-embed'}} class="current"{{/ifpage}}><a href="responsive-embed.html">Responsive Embed</a></li>
-          <li{{#ifpage 'label'}} class="current"{{/ifpage}}><a href="label.html">Label</a></li>
-          <li{{#ifpage 'orbit'}} class="current"{{/ifpage}}><a href="orbit.html">Orbit <span class="label">JS</span> <small>Carousel</small></a></li>
-          <li{{#ifpage 'progress-bar'}} class="current"{{/ifpage}}><a href="progress-bar.html">Progress Bar</a></li>
-          <li{{#ifpage 'thumbnail'}} class="current"{{/ifpage}}><a href="thumbnail.html">Thumbnail</a></li>
-          <li{{#ifpage 'tooltip'}} class="current"{{/ifpage}}><a href="tooltip.html">Tooltip <span class="label">JS</span></a></li>
-        </ul>
-      </div>
-    </li>
-
-    <li class="accordion-item {{#ifpage 'abide' 'equalizer' 'interchange' 'toggler' 'sticky'}}is-active{{/ifpage}}" data-accordion-item>
-      <a href="#" class="accordion-title">Plugins</a>
-      <div class="accordion-content {{#ifpage 'abide' 'equalizer' 'interchange' 'toggler' 'sticky'}}is-active{{/ifpage}}" data-tab-content>
-        <ul class="docs-nav-subcategory">
-          <li{{#ifpage 'abide'}} class="current"{{/ifpage}}><a href="abide.html">Abide <small>Form Validation</small></a></li>
-          <li{{#ifpage 'equalizer'}} class="current"{{/ifpage}}><a href="equalizer.html">Equalizer <small>Column Alignment</small></a></li>
-          <li{{#ifpage 'interchange'}} class="current"{{/ifpage}}><a href="interchange.html">Interchange <small>Responsive Content</small></a></li>
-          <li{{#ifpage 'toggler'}} class="current"{{/ifpage}}><a href="toggler.html">Toggler <small>CSS Helper</small></a></li>
-          <li{{#ifpage 'sticky'}} class="current"{{/ifpage}}><a href="sticky.html">Sticky <small>Header/Sidebar</small></a></li>
-        </ul>
-      </div>
-    </li>
-
-    <li class="accordion-item {{#ifpage 'sass-functions' 'sass-mixins'}}is-active{{/ifpage}}" data-accordion-item>
-      <a href="#" class="accordion-title">Sass</a>
-      <div class="accordion-content {{#ifpage 'sass-functions' 'sass-mixins'}}is-active{{/ifpage}}" data-tab-content>
-        <ul class="docs-nav-subcategory">
-          <li{{#ifpage 'sass-functions'}} class="current"{{/ifpage}}><a href="sass-functions.html">Functions</a></li>
-          <li{{#ifpage 'sass-mixins'}} class="current"{{/ifpage}}><a href="sass-mixins.html">Mixins</a></li>
-        </ul>
-      </div>
-    </li>
-
-    <li class="accordion-item {{#ifpage 'motion-ui' 'panini' 'style-sherpa'}}is-active{{/ifpage}}" data-accordion-item>
-      <a href="#" class="accordion-title">Libraries</a>
-      <div class="accordion-content {{#ifpage 'motion-ui' 'panini' 'style-sherpa'}}is-active{{/ifpage}}" data-tab-content>
-        <ul class="docs-nav-subcategory">
-          <li{{#ifpage 'motion-ui'}} class="current"{{/ifpage}}><a href="motion-ui.html">Motion UI</a></li>
-          <li{{#ifpage 'panini'}} class="current"{{/ifpage}}><a href="panini.html">Panini</a></li>
-          <li{{#ifpage 'style-sherpa'}} class="current"{{/ifpage}}><a href="style-sherpa.html">Style Sherpa</a></li>
-        </ul>
-      </div>
-    </li>
-
-    <li class="accordion-item" data-accordion-item>
-      <a href="#" class="accordion-title">Older Versions</a>
-      <div class="accordion-content" data-tab-content>
-        <ul class="docs-nav-subcategory">
-          <li><a href="http://foundation.zurb.com/sites/docs/v/5.5.3/index.html">Foundation 5</a></li>
-          <li><a href="http://foundation.zurb.com/sites/docs/v/4.3.2/index.html">Foundation 4</a></li>
-          <li><a href="http://foundation.zurb.com/sites/docs/v/3.2.5/">Foundation 3</a></li>
-          <li><a href="http://foundation.zurb.com/sites/docs/v/2.2.1/">Foundation 2</a></li>
-        </ul>
-      </div>
-    </li>
-
-  </ul>
-
-</div>
+  <div class="vertical menu docs-nav" id="docs-menu">
+
+  <!--
+    <ul class="docs-nav-version-container">
+      <li class="docs-nav-version">
+        <a href="https://github.com/zurb/foundation-sites/releases/" target="_blank">Changelog</a>
+      </li>
+    </ul>
+  -->
+
+
+    <ul class="accordion docs-nav-category" data-accordion>
+      <li class="accordion-item {{#ifpage 'index' 'installation' 'starter-projects' 'accessibility' 'kitchen-sink'}}is-active{{/ifpage}}" data-accordion-item>
+        <a href="#" class="accordion-title">Getting Started</a>
+        <div class="accordion-content {{#ifpage 'index' 'installation' 'starter-projects' 'accessibility' 'kitchen-sink'}}is-active{{/ifpage}}" data-tab-content>
+          <ul class="docs-nav-subcategory">
+            <li{{#ifpage 'index'}} class="current"{{/ifpage}}><a href="index.html">Welcome</a></li>
+            <li{{#ifpage 'installation'}} class="current"{{/ifpage}}><a href="installation.html">Installation</a></li>
+            <li{{#ifpage 'starter-projects'}} class="current"{{/ifpage}}><a href="starter-projects.html">Starter Projects</a></li>
+            <li{{#ifpage 'compatibility'}} class="current"{{/ifpage}}><a href="compatibility.html">Compatibility</a></li>
+            <li{{#ifpage 'accessibility'}} class="current"{{/ifpage}}><a href="accessibility.html">Accessibility</a></li>
+            <li{{#ifpage 'kitchen-sink'}} class="current"{{/ifpage}}><a href="kitchen-sink.html">Kitchen Sink</a></li>
+          </ul>
+        </div>
+      </li>
+
+      <li class="accordion-item {{#ifpage 'global' 'rtl' 'flexbox' 'sass' 'javascript' 'javascript-utilities' 'media-queries'}}is-active{{/ifpage}}" data-accordion-item>
+        <a href="#" class="accordion-title">Setup</a>
+        <div class="accordion-content {{#ifpage 'global' 'rtl' 'flexbox' 'sass' 'javascript' 'javascript-utilities' 'media-queries'}}is-active{{/ifpage}}" data-tab-content>
+          <ul class="docs-nav-subcategory">
+            <li{{#ifpage 'global'}} class="current"{{/ifpage}}><a href="global.html">Global Styles</a></li>
+            <li{{#ifpage 'rtl'}} class="current"{{/ifpage}}><a href="rtl.html">Right-to-Left Support</a></li>
+            <li{{#ifpage 'flexbox'}} class="current"{{/ifpage}}><a href="flexbox.html">Flexbox</a></li>
+            <li{{#ifpage 'sass'}} class="current"{{/ifpage}}><a href="sass.html">Sass</a></li>
+            <li{{#ifpage 'javascript'}} class="current"{{/ifpage}}><a href="javascript.html">JavaScript</a></li>
+            <li{{#ifpage 'javascript-utilities'}} class="current"{{/ifpage}}><a href="javascript-utilities.html">JavaScript Utilities</a></li>
+            <li{{#ifpage 'media-queries'}} class="current"{{/ifpage}}><a href="media-queries.html">Media Queries</a></li>
+          </ul>
+        </div>
+      </li>
+
+      <li class="accordion-item {{#ifpage 'grid' 'flex-grid' 'forms' 'visibility' 'float-classes'}}is-active{{/ifpage}}" data-accordion-item>
+        <a href="#" class="accordion-title">General</a>
+        <div class="accordion-content {{#ifpage 'grid' 'flex-grid' 'forms' 'visibility' 'float-classes'}}is-active{{/ifpage}}" data-tab-content>
+          <ul class="docs-nav-subcategory">
+            <li{{#ifpage 'grid'}} class="current"{{/ifpage}}><a href="grid.html">Grid</a></li>
+            <li{{#ifpage 'flex-grid'}} class="current"{{/ifpage}}><a href="flex-grid.html">Flex Grid</a></li>
+            <li{{#ifpage 'forms'}} class="current"{{/ifpage}}><a href="forms.html">Forms</a></li>
+            <li{{#ifpage 'visibility'}} class="current"{{/ifpage}}><a href="visibility.html">Visibility Classes</a></li>
+            <li{{#ifpage 'float-classes'}} class="current"{{/ifpage}}><a href="float-classes.html">Float Classes</a></li>
+          </ul>
+        </div>
+      </li>
+
+      <li class="accordion-item {{#ifpage 'typography-base' 'typography-helpers'}}is-active{{/ifpage}}" data-accordion-item>
+        <a href="#" class="accordion-title">Typography</a>
+        <div class="accordion-content {{#ifpage 'typography-base' 'typography-helpers'}}is-active{{/ifpage}}" data-tab-content>
+          <ul class="docs-nav-subcategory">
+            <li{{#ifpage 'typography-base'}} class="current"{{/ifpage}}><a href="typography-base.html">Base Styles</a></li>
+            <li{{#ifpage 'typography-helpers'}} class="current"{{/ifpage}}><a href="typography-helpers.html">Helper Classes</a></li>
+          </ul>
+        </div>
+      </li>
+
+      <li class="accordion-item {{#ifpage 'button' 'button-group' 'close-button' 'slider' 'switch'}}is-active{{/ifpage}}" data-accordion-item>
+        <a href="#" class="accordion-title">Controls</a>
+        <div class="accordion-content {{#ifpage 'button' 'button-group' 'close-button' 'slider' 'switch'}}is-active{{/ifpage}}" data-tab-content>
+          <ul class="docs-nav-subcategory">
+            <li{{#ifpage 'button'}} class="current"{{/ifpage}}><a href="button.html">Button</a></li>
+            <li{{#ifpage 'button-group'}} class="current"{{/ifpage}}><a href="button-group.html">Button Group</a></li>
+            <li{{#ifpage 'close-button'}} class="current"{{/ifpage}}><a href="close-button.html">Close Button</a></li>
+            <li{{#ifpage 'slider'}} class="current"{{/ifpage}}><a href="slider.html">Slider <span class="label">JS</span></a></li>
+            <li{{#ifpage 'switch'}} class="current"{{/ifpage}}><a href="switch.html">Switch</a></li>
+          </ul>
+        </div>
+      </li>
+
+      <li class="accordion-item {{#ifpage 'navigation' 'menu' 'dropdown-menu' 'drilldown-menu' 'accordion-menu' 'top-bar' 'responsive-navigation' 'magellan' 'pagination' 'breadcrumbs'}}is-active{{/ifpage}}" data-accordion-item>
+        <a href="#" class="accordion-title">Navigation</a>
+        <div class="accordion-content {{#ifpage 'navigation' 'menu' 'dropdown-menu' 'drilldown-menu' 'accordion-menu' 'top-bar' 'responsive-navigation' 'magellan' 'pagination' 'breadcrumbs'}}is-active{{/ifpage}}" data-tab-content>
+          <ul class="docs-nav-subcategory">
+            <li{{#ifpage 'navigation'}} class="current"{{/ifpage}}><a href="navigation.html">Overview</a></li>
+            <li{{#ifpage 'menu'}} class="current"{{/ifpage}}><a href="menu.html">Menu</a></li>
+            <li{{#ifpage 'dropdown-menu'}} class="current"{{/ifpage}}><a href="dropdown-menu.html">Dropdown Menu <span class="label">JS</span></a></li>
+            <li{{#ifpage 'drilldown-menu'}} class="current"{{/ifpage}}><a href="drilldown-menu.html">Drilldown Menu <span class="label">JS</span></a></li>
+            <li{{#ifpage 'accordion-menu'}} class="current"{{/ifpage}}><a href="accordion-menu.html">Accordion Menu <span class="label">JS</span></a></li>
+            <li{{#ifpage 'top-bar'}} class="current"{{/ifpage}}><a href="top-bar.html">Top Bar</a></li>
+            <li{{#ifpage 'responsive-navigation'}} class="current"{{/ifpage}}><a href="responsive-navigation.html">Responsive Navigation</a></li>
+            <li{{#ifpage 'magellan'}} class="current"{{/ifpage}}><a href="magellan.html">Magellan <span class="label">JS</span></a></li>
+            <li{{#ifpage 'pagination'}} class="current"{{/ifpage}}><a href="pagination.html">Pagination</a></li>
+            <li{{#ifpage 'breadcrumbs'}} class="current"{{/ifpage}}><a href="breadcrumbs.html">Breadcrumbs</a></li>
+          </ul>
+        </div>
+      </li>
+
+      <li class="accordion-item {{#ifpage 'accordion' 'callout' 'card' 'dropdown' 'media-object' 'off-canvas' 'reveal' 'table' 'tabs' 'responsive-accordion-tabs'}}is-active{{/ifpage}}" data-accordion-item>
+        <a href="#" class="accordion-title">Containers</a>
+        <div class="accordion-content {{#ifpage 'accordion' 'callout' 'card' 'dropdown' 'media-object' 'off-canvas' 'reveal' 'table' 'tabs' 'responsive-accordion-tabs'}}is-active{{/ifpage}}" data-tab-content>
+          <ul class="docs-nav-subcategory">
+            <li{{#ifpage 'accordion'}} class="current"{{/ifpage}}><a href="accordion.html">Accordion <span class="label">JS</span></a></li>
+            <li{{#ifpage 'callout'}} class="current"{{/ifpage}}><a href="callout.html">Callout</a></li>
+            <li{{#ifpage 'card'}} class="current"{{/ifpage}}><a href="card.html">Card</a></li>
+            <li{{#ifpage 'dropdown'}} class="current"{{/ifpage}}><a href="dropdown.html">Dropdown <span class="label">JS</span></a></li>
+            <li{{#ifpage 'media-object'}} class="current"{{/ifpage}}><a href="media-object.html">Media Object</a></li>
+            <li{{#ifpage 'off-canvas'}} class="current"{{/ifpage}}><a href="off-canvas.html">Off-canvas <span class="label">JS</span></a></li>
+            <li{{#ifpage 'reveal'}} class="current"{{/ifpage}}><a href="reveal.html">Reveal <span class="label">JS</span> <small>Modal</small></a></li>
+            <li{{#ifpage 'table'}} class="current"{{/ifpage}}><a href="table.html">Table</a></li>
+            <li{{#ifpage 'tabs'}} class="current"{{/ifpage}}><a href="tabs.html">Tabs <span class="label">JS</span></a></li>
+            <li{{#ifpage 'responsive-accordion-tabs'}} class="current"{{/ifpage}}><a href="responsive-accordion-tabs.html">Responsive Accordion Tabs<span class="label">JS</span></a></li>
+          </ul>
+        </div>
+      </li>
+
+      <li class="accordion-item {{#ifpage 'badge' 'responsive-embed' 'label' 'orbit' 'progress-bar' 'thumbnail' 'tooltip'}}is-active{{/ifpage}}" data-accordion-item>
+        <a href="#" class="accordion-title">Media</a>
+        <div class="accordion-content {{#ifpage 'accordion' 'callout' 'card' 'dropdown' 'media-object' 'off-canvas' 'reveal' 'table' 'tabs' 'responsive-accordion-tabs'}}is-active{{/ifpage}}" data-tab-content>
+          <ul class="docs-nav-subcategory">
+            <li{{#ifpage 'badge'}} class="current"{{/ifpage}}><a href="badge.html">Badge</a></li>
+            <li{{#ifpage 'responsive-embed'}} class="current"{{/ifpage}}><a href="responsive-embed.html">Responsive Embed</a></li>
+            <li{{#ifpage 'label'}} class="current"{{/ifpage}}><a href="label.html">Label</a></li>
+            <li{{#ifpage 'orbit'}} class="current"{{/ifpage}}><a href="orbit.html">Orbit <span class="label">JS</span> <small>Carousel</small></a></li>
+            <li{{#ifpage 'progress-bar'}} class="current"{{/ifpage}}><a href="progress-bar.html">Progress Bar</a></li>
+            <li{{#ifpage 'thumbnail'}} class="current"{{/ifpage}}><a href="thumbnail.html">Thumbnail</a></li>
+            <li{{#ifpage 'tooltip'}} class="current"{{/ifpage}}><a href="tooltip.html">Tooltip <span class="label">JS</span></a></li>
+          </ul>
+        </div>
+      </li>
+
+      <li class="accordion-item {{#ifpage 'abide' 'equalizer' 'interchange' 'toggler' 'sticky'}}is-active{{/ifpage}}" data-accordion-item>
+        <a href="#" class="accordion-title">Plugins</a>
+        <div class="accordion-content {{#ifpage 'abide' 'equalizer' 'interchange' 'toggler' 'sticky'}}is-active{{/ifpage}}" data-tab-content>
+          <ul class="docs-nav-subcategory">
+            <li{{#ifpage 'abide'}} class="current"{{/ifpage}}><a href="abide.html">Abide <small>Form Validation</small></a></li>
+            <li{{#ifpage 'equalizer'}} class="current"{{/ifpage}}><a href="equalizer.html">Equalizer <small>Column Alignment</small></a></li>
+            <li{{#ifpage 'interchange'}} class="current"{{/ifpage}}><a href="interchange.html">Interchange <small>Responsive Content</small></a></li>
+            <li{{#ifpage 'toggler'}} class="current"{{/ifpage}}><a href="toggler.html">Toggler <small>CSS Helper</small></a></li>
+            <li{{#ifpage 'sticky'}} class="current"{{/ifpage}}><a href="sticky.html">Sticky <small>Header/Sidebar</small></a></li>
+          </ul>
+        </div>
+      </li>
+
+      <li class="accordion-item {{#ifpage 'sass-functions' 'sass-mixins'}}is-active{{/ifpage}}" data-accordion-item>
+        <a href="#" class="accordion-title">Sass</a>
+        <div class="accordion-content {{#ifpage 'sass-functions' 'sass-mixins'}}is-active{{/ifpage}}" data-tab-content>
+          <ul class="docs-nav-subcategory">
+            <li{{#ifpage 'sass-functions'}} class="current"{{/ifpage}}><a href="sass-functions.html">Functions</a></li>
+            <li{{#ifpage 'sass-mixins'}} class="current"{{/ifpage}}><a href="sass-mixins.html">Mixins</a></li>
+          </ul>
+        </div>
+      </li>
+
+      <li class="accordion-item {{#ifpage 'motion-ui' 'panini' 'style-sherpa'}}is-active{{/ifpage}}" data-accordion-item>
+        <a href="#" class="accordion-title">Libraries</a>
+        <div class="accordion-content {{#ifpage 'motion-ui' 'panini' 'style-sherpa'}}is-active{{/ifpage}}" data-tab-content>
+          <ul class="docs-nav-subcategory">
+            <li{{#ifpage 'motion-ui'}} class="current"{{/ifpage}}><a href="motion-ui.html">Motion UI</a></li>
+            <li{{#ifpage 'panini'}} class="current"{{/ifpage}}><a href="panini.html">Panini</a></li>
+            <li{{#ifpage 'style-sherpa'}} class="current"{{/ifpage}}><a href="style-sherpa.html">Style Sherpa</a></li>
+          </ul>
+        </div>
+      </li>
+
+      <li class="accordion-item" data-accordion-item>
+        <a href="#" class="accordion-title">Older Versions</a>
+        <div class="accordion-content" data-tab-content>
+          <ul class="docs-nav-subcategory">
+            <li><a href="http://foundation.zurb.com/sites/docs/v/5.5.3/index.html">Foundation 5</a></li>
+            <li><a href="http://foundation.zurb.com/sites/docs/v/4.3.2/index.html">Foundation 4</a></li>
+            <li><a href="http://foundation.zurb.com/sites/docs/v/3.2.5/">Foundation 3</a></li>
+            <li><a href="http://foundation.zurb.com/sites/docs/v/2.2.1/">Foundation 2</a></li>
+          </ul>
+        </div>
+      </li>
+
+    </ul>
+
+  </div>