Foundation 6 Top Bar dropdown menu not working not work

Question

I copied the foundation navbar syntax straight from their site https://foundation.zurb.com/sites/docs/top-bar.html and the dropdown menu feature doesnt seem to be working

Here's the code:

<div class="top-bar">
  <div class="top-bar-left">
    <ul class="dropdown menu" data-dropdown-menu>
      <li class="menu-text">Site Title</li>
      <li>
        <a href="#">One</a>
        <ul class="menu vertical">
          <li><a href="#">One</a></li>
          <li><a href="#">Two</a></li>
          <li><a href="#">Three</a></li>
        </ul>
      </li>
      <li><a href="#">Two</a></li>
      <li><a href="#">Three</a></li>
    </ul>
  </div>
  <div class="top-bar-right">
    <ul class="menu">
      <li><input type="search" placeholder="Search"></li>
      <li><button type="button" class="button">Search</button></li>
    </ul>
  </div>
</div>

Here's what it looks like

Answer 1

I had the same issue -

This appears to be a known issue with Foundation 6.2 ~ 6.4 - at least for Rails apps using the foundation-rails gem.

The fix was to update the foundation_and_overrides.scss include order, move

@include foundation-dropdown-menu;

to the bottom as per here

Answer 2

Make sure to initialize foundation:

$(document).foundation();