button-group-migration4.html

<!-- Button groups in Foundation 4 -->
<ul class="button-group">
  <li><a href="#" class="small button">Button 1</a></li>
  <li><a href="#" class="small button">Button 2</a></li>
  <li><a href="#" class="small button">Button 3</a></li>
</ul>

<!-- Nav Bar Example -->
<div class="your-class">
  <ul class="button-group">
    <li><a href="#" class="button" data-dropdown="nav1">Nav 1</a></li>
    <li><a href="#" class="button" data-dropdown="nav2">Nav 2</a></li>
    <li><a href="#" class="button" data-dropdown="nav3">Nav 3</a></li>
  </ul>
</div>

<!-- Make sure these are right above you body tag -->
<ul id="nav1" class="f-dropdown">
  <li><a href="#">This is a link</a></li>
  <li><a href="#">This is another</a></li>
  <li><a href="#">Yet another</a></li>
</ul>
<ul id="nav2" class="f-dropdown">
  <li><a href="#">This is a link</a></li>
  <li><a href="#">This is another</a></li>
  <li><a href="#">Yet another</a></li>
</ul>
<ul id="nav3" class="f-dropdown">
  <li><a href="#">This is a link</a></li>
  <li><a href="#">This is another</a></li>
  <li><a href="#">Yet another</a></li>
</ul>