Updating version drop down styles

diff --cc docs/assets/scss/_accordion-content.scss
index 140ea1de54e86662ed6bf979070ad83f0c10370c,0000000000000000000000000000000000000000..aab6cf3f74a73e0ac00f5618576311cd7fa0e0e5
mode 100644,000000..100644
--- 1/docs/assets/scss/_accordion-content.scss
--- /dev/null
+++ b/docs/assets/scss/_accordion-content.scss
@@@ -1,54 -1,0 +1,54 @@@
-   margin-top: 2rem;
 +.accordion {
++//  margin-top: 2rem;
 +}
 +
 +.accordion-content-item {
 +  margin-bottom: 1rem;
 +}
 +
 +.accordion-title {
 +  background-color: #f5f5f5;
 +  color: #676767;
 +  font-size: 1.25rem;
 +  margin-bottom: 1rem;
 +  border-bottom: 1px solid #e6e6e6;
 +}
 +
 +.accordion-title:hover,
 +.accordion-title:focus {
 +  color: $black;
 +  background-color: #efefef;
 +}
 +
 +
 +.welcome-accordion-item {
 +  
 +  &.is-active {
 +    box-shadow: 0px 1px 8px 0px rgba(0,0,0,0.15);  
 +    
 +    .accordion-title {
 +      margin-bottom: 0;
 +      border-bottom: none;
 +      color: $black;
 +    }
 +    
 +    .accordion-content {
 +      margin-bottom: 1rem;
 +      border-bottom: 1px solid #e6e6e6;
 +    }
 +  }
 +}
 +
 +
 +
 +
 +.accordion-content-item-divider {
 +  border-bottom: 1px dashed #e5e5e5;
 +}
 +
 +.accordion-content-item-cta {
 +  
 +  img {
 +    margin-right: 0.5rem;
 +  }
 +}

diff --cc docs/assets/scss/_component-list.scss
index ddcd3be8c25185c3e0b3b86f8f749b6cdedc009d,0000000000000000000000000000000000000000..17b030153ca7fdcb23088bf90101eed2cf2b02a8
mode 100644,000000..100644
--- 1/docs/assets/scss/_component-list.scss
--- /dev/null
+++ b/docs/assets/scss/_component-list.scss
@@@ -1,62 -1,0 +1,63 @@@
-   padding-top: 0.5rem;
 +.docs-nav.menu {
++  padding-top: 1rem;
++  border-right: 1px solid #efefef;
 +}
 +
 +.docs-nav-category {
 +  background: none;
 +  
 +  .accordion-title {
 +    border: none; 
 +    color: #383838;
 +    font-weight: 600;
 +  }
 +  
 +  .accordion-content {
 +    padding-top: 0;
 +    border: none;
 +    background: none;
 +  }
 +  
 +  .is-active > .accordion-title::before {
 +    content: '';
 +  }
 +
 +  .accordion-title::before {
 +    content: '';
 +  }
 +}
 +
 +
 +.docs-nav.menu a:hover {
 +  background: none;
 +}
 +
 +.docs-nav.menu a:focus {
 +  background: none;
 +}
 +
 +.docs-nav.menu .current a {
 +  background: none;
 +  color: $primary-color;
 +}
 +
 +.docs-nav-subcategory {
 +  list-style: none;
 +  margin-left: 0.65rem;
 +  
 +  li {
 +    padding: 0.25rem 0;
 +  }
 +  
 +  li a {
 +    font-size: 1rem;
 +    color: #414141;
 +    line-height: 1.5;
 +  }
 +}
 +
 +.docs-nav-version-container {
 +  margin-left: 0;
 +  border-bottom: 1px solid #e0e0e0;
 +  padding-bottom: 0.5rem;
 +}

diff --cc docs/layout/default.html
index 856ce14d75989ad0e1790b9593e09284db22fd94,409ff9504f416e968c38e7484707bae29385a6da..2ef99e70f25b3799874c98f197d9ce42f62876f3
--- 1/docs/layout/default.html
--- 2/docs/layout/default.html
+++ b/docs/layout/default.html
@@@ -44,35 -43,10 +44,48 @@@
  
        {{> navigation}}
        {{> mobile-navigation}}
 -
 -      <input type="text" class="docs-search" data-docs-search placeholder="Find a page, component, variable, mixin, function...">
 -
 -      <div class="expanded row">
 +  
 +      <div class="collapse expanded row secondary-bar">
 +        <div class="medium-3 large-2 columns">
++        
++          <button class="button version-dropdown-label" data-toggle="example-dropdown"><span class="foundation-version-label">Foundation for Sites</span><span class="foundation-version-number">6.3.0</span></button>
++            <div class="dropdown-pane version-dropdown" id="example-dropdown" data-dropdown data-auto-focus="true">
++              <ul class="version-dropdown-menu">
++                <li class="version-dropdown-menu-link"><a href="#">6.2.0</a></li>
++                <li class="version-dropdown-menu-link"><a href="#">6.1.0</a></li>
++                <li class="version-dropdown-menu-link"><a href="#">6.0.0</a></li>
++                <li class="version-dropdown-menu-link"><a href="#">5.9.0</a></li>
++                <li class="version-dropdown-menu-link"><a href="#">5.8.0</a></li>
++              </ul>
++            </div>
++<!--
 +          <ul class="dropdown menu version-dropdown" data-dropdown-menu>
 +            <li class="version-menu-list">
 +              <a href="#" class="version-dropdown-label"><span class="foundation-version-label">Foundation for Sites</span><span class="foundation-version-number">6.3.0</span></a>
 +              <ul class="menu version-dropdown-menu">
 +                <li class="version-dropdown-menu-link"><a href="#">6.2.0</a></li>
 +                <li class="version-dropdown-menu-link"><a href="#">6.0</a></li>
 +                <li class="version-dropdown-menu-link"><a href="#">5.0</a></li>
 +                <li class="version-dropdown-menu-link"><a href="#">4.0</a></li>
 +              </ul>
 +            </li>
 +          </ul>
++-->
 +        </div>
 +        <div class="medium-6 large-7 columns">
 +          <input type="text" class="docs-search" data-docs-search placeholder="Find a page, component, variable, mixin, function...">
 +        </div>
 +        <div class="medium-3 large-3 columns social-container">
 +          <ul class="social-list">
 +            <li><a class="github-button" href="https://github.com/ntkme/github-buttons" data-style="mega" data-count-href="/ntkme/github-buttons/stargazers" data-count-api="/repos/ntkme/github-buttons#stargazers_count" data-count-aria-label="# stargazers on GitHub" aria-label="Star ntkme/github-buttons on GitHub">Star</a></li>
 +            <li><a class="github-button" href="https://github.com/ntkme/github-buttons" data-style="mega" data-count-href="/ntkme/github-buttons/stargazers" data-count-api="/repos/ntkme/github-buttons#stargazers_count" data-count-aria-label="# stargazers on GitHub" aria-label="Star ntkme/github-buttons on GitHub">Star</a></li>
 +          </ul>
 +        </div>
 +      </div>
 +      
 +      
 +      
 +      <div class="collapse expanded row">
          <div class="medium-9 large-10 medium-push-3 large-push-2 columns">
  <!-- do not indent -->
  {{> body}}

diff --cc docs/pages/abide.md
index 7c11614eefc78c961ed579ae8aeaee1791dafe7c,7f57b5377142a862294c7f1ef990ee9a14fa9f99..ea17fc20d62cbbd7f932dfea90ca41ca95e5be6b
--- 1/docs/pages/abide.md
--- 2/docs/pages/abide.md
+++ b/docs/pages/abide.md
@@@ -8,9 -8,9 +8,9 @@@ tags
    - validation
  ---
  
 -### Abide Demo
 +## Abide Demo
  
- These input types create a text field: `text`, `date`, `datetime`, `datetime-local`, `email`, `month`, `number`, `password`, `search`, `tel`, `time`, `url`, and `week`.
+ These input types create a text field: `text`, `date`, `datetime`, `datetime-local`, `email`, `month`, `number`, `password`, `search`, `tel`, `time`, `url`, and `week`. Note the use of the novalidate attribute to disable any browser validation that could conflict with Abide.
  
  ```html_example
  <form data-abide novalidate>

diff --cc docs/pages/accordion.md
Simple merge

diff --cc docs/partials/component-list.html
index c3cc11f31db076a7e79b230a3662ee126214737f,07e515813886d20e8cb9fce366280fc7a01abc1c..26d3e8fb87bbf83cad673a6159227e9536743df5
--- 1/docs/partials/component-list.html
--- 2/docs/partials/component-list.html
+++ b/docs/partials/component-list.html
@@@ -1,176 -1,95 +1,177 @@@
 -<ul class="vertical menu docs-nav" id="docs-menu">
 -  <li class="docs-nav-version">
 -    <span data-docs-version></span>
 -    <a href="https://github.com/zurb/foundation-sites/releases/" target="_blank">(Changelog)</a>
 -  </li>
 +<div class="vertical menu docs-nav" id="docs-menu">
 +  
++<!--
 +  <ul class="docs-nav-version-container">
 +    <li class="docs-nav-version">
-       <span data-docs-version></span>
-       <a href="https://github.com/zurb/foundation-sites/releases/" target="_blank">(Changelog)</a>
++      <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 is-active" data-accordion-item>
 +      <a href="#" class="accordion-title">Getting Started</a>
 +      <div class="accordion-content" 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" data-accordion-item>
 +      <a href="#" class="accordion-title">Setup</a>
 +      <div class="accordion-content" 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" data-accordion-item>
 +      <a href="#" class="accordion-title">General</a>
 +      <div class="accordion-content" 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" data-accordion-item>
 +      <a href="#" class="accordion-title">Typography</a>
 +      <div class="accordion-content" 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" data-accordion-item>
 +      <a href="#" class="accordion-title">Controls</a>
 +      <div class="accordion-content" 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" data-accordion-item>
 +      <a href="#" class="accordion-title">Navigation</a>
 +      <div class="accordion-content" 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" data-accordion-item>
 +      <a href="#" class="accordion-title">Containers</a>
 +      <div class="accordion-content" 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" data-accordion-item>
 +      <a href="#" class="accordion-title">Media</a>
 +      <div class="accordion-content" 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" data-accordion-item>
 +      <a href="#" class="accordion-title">Plugins</a>
 +      <div class="accordion-content" 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" data-accordion-item>
 +      <a href="#" class="accordion-title">Sass</a>
 +      <div class="accordion-content" 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" data-accordion-item>
 +      <a href="#" class="accordion-title">Libraries</a>
 +      <div class="accordion-content" 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>
  
 -  <li class="docs-nav-title">Getting Started</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>
 -
 -  <li class="docs-nav-title">Setup</li>
 -  <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>
 -
 -  <li class="docs-nav-title">General</li>
 -  <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>
 -
 -  <li class="docs-nav-title">Typography</li>
 -  <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>
 -
 -  <li class="docs-nav-title">Controls</li>
 -  <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>
 -
 -  <li class="docs-nav-title">Navigation</li>
 -  <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>
 -
 -  <li class="docs-nav-title">Containers</li>
 -  <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>
 -
 -  <li class="docs-nav-title">Media</li>
 -  <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>
 -
 -  <li class="docs-nav-title">Plugins</li>
 -  <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>
 -
 -  <li class="docs-nav-title">Sass</li>
 -  <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>
 -
 -  <li class="docs-nav-title">Libraries</li>
 -  <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>
 -
 -  <li class="docs-nav-title">Older Versions</li>
 -  <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>

diff --cc js/foundation.tabs.js
index 16b53e242b0f04ea7a1b4259d41c8c8cbafe2bcc,8ac3fd8cb360c625c50b516711d50c8e348a1c87..46b23e400567e1b3b9cac52321df3e18435f025b
--- 1/js/foundation.tabs.js
--- 2/js/foundation.tabs.js
+++ b/js/foundation.tabs.js
@@@ -50,7 -50,7 +50,7 @@@ class Tabs 
        var $elem = $(this),
            $link = $elem.find('a'),
            isActive = $elem.hasClass(`${_this.options.linkActiveClass}`),
--          hash = $link[0].hash.slice(1),
++          hash = $link.attr('data-tabs-target') || $link[0].hash.slice(1),
            linkId = $link[0].id ? $link[0].id : `${hash}-label`,
            $tabContent = $(`#${hash}`);
  
@@@ -76,8 -76,8 +76,7 @@@
            });
          });
        }
 -
      });
- 
      if(this.options.matchHeight) {
        var $images = this.$tabContent.find('img');
  
@@@ -235,8 -235,8 +234,8 @@@
      var $oldTab = this.$element.
            find(`.${this.options.linkClass}.${this.options.linkActiveClass}`),
            $tabLink = $target.find('[role="tab"]'),
--          hash = $tabLink[0].hash,
--          $targetContent = this.$tabContent.find(hash);
++          hash = $tabLink.attr('data-tabs-target') || $tabLink[0].hash.slice(1),
++          $targetContent = this.$tabContent.find(`#${hash}`);
  
      //close old tab
      this._collapseTab($oldTab);
@@@ -272,8 -272,8 +271,8 @@@
     */
    _openTab($target) {
        var $tabLink = $target.find('[role="tab"]'),
--          hash = $tabLink[0].hash,
--          $targetContent = this.$tabContent.find(hash);
++          hash = $tabLink.attr('data-tabs-target') || $tabLink[0].hash.slice(1),
++          $targetContent = this.$tabContent.find(`#${hash}`);
  
        $target.addClass(`${this.options.linkActiveClass}`);
  
@@@ -488,4 -488,4 +487,4 @@@ Tabs.defaults = 
  // Window exports
  Foundation.plugin(Tabs, 'Tabs');
  
--}(jQuery);
++}(jQuery);

diff --cc scss/grid/_flex-grid.scss
Simple merge