Menu icon Foundation
How to make a horizontal menu in Foundation 5

So I am just starting to learn the new foundation 5.. after finally getting use to 4 lol.. I am also trying to redo my personal site and make it responsive. My current issue is how to make a simple horizontal navigation menu(with drop downs).

I could do this in foundation 4 pretty easy, but with foundation 5 I am lost..

I have put the code I used for foundation 4 in the code box to give an idea of what I am after.

  <section>
    <p class="title" data-section-title><a href="#">Section 2</a></p>
    <div class="content" data-section-content>
      <ul class="side-nav">
        <li><a href="#">Link 1</a></li>
        <li><a href="#">Link 2</a></li>
        <li><a href="#">Link 3</a></li>
        <li class="divider"></li>
        <li><a href="#">Link 1</a></li>
      </ul>
    </div>
  </section>
            

         

navigationtopbardrop down

So I am just starting to learn the new foundation 5.. after finally getting use to 4 lol.. I am also trying to redo my personal site and make it responsive. My current issue is how to make a simple horizontal navigation menu(with drop downs).

I could do this in foundation 4 pretty easy, but with foundation 5 I am lost..

I have put the code I used for foundation 4 in the code box to give an idea of what I am after.

  <section>
    <p class="title" data-section-title><a href="#">Section 2</a></p>
    <div class="content" data-section-content>
      <ul class="side-nav">
        <li><a href="#">Link 1</a></li>
        <li><a href="#">Link 2</a></li>
        <li><a href="#">Link 3</a></li>
        <li class="divider"></li>
        <li><a href="#">Link 1</a></li>
      </ul>
    </div>
  </section>
            

         

Eric Warncke over 5 years ago

Hey homeslice,

There are 3 different types of navigations in Foundation 5.

Magellan
http://foundation.zurb.com/docs/components/magellan.html

Off-canvas
http://foundation.zurb.com/docs/components/offcanvas.html

Top-bar
http://foundation.zurb.com/docs/components/topbar.html

I personally like Topbar the best, because it automatically takes your navigation and turns it into an off-canvas menu for mobile. Its like a 2 in 1. You should read the documentation and try it out. I have been trying to get a dropdown button to appear in Top-bar when it is shrunk down to the mobile size, as well as the default drop off-canvas menu (basically have the default mobile menu AND an additional button with a dropdown next to it). I haven't figured out how to do that yet, but if you figure it out be sure to let me know how you did it.

Gibranal NN over 5 years ago

Use this template.
This is part of the topbar
<section class="top-bar-section">
<!-- Right Nav Section -->
<ul class="right">
<li class="has-dropdown">
<a href="#">Section 2</a>
<ul class="dropdown">
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<!-- more links with the same codestyle. Also, the divider class is still the same with Foundation 5. -->
</ul>
</li>
</ul>
</section>

More info click here: http://foundation.zurb.com/docs/components/topbar.html