We've covered several components and plugins that are intended for, or can be adapted to, navigation. Each of these is useful in its own way. Now we'll look at Foundation's most powerful navigation plugin, Top Bar.
It supports multi-level flyout menus, which work best as a fixed bar across the top of your web page. Also, it compresses to a vertical accordion style menu on small devices, and it can contain many different elements.
A Top Bar consists of an overall container with a title area and navigation section within it. Here is the high-level code:
<nav class="top-bar"> <ul class="title-area"> ... </ul> <section class="top-bar-section"> ... </section> </nav>
The outer container is identified with the
top-bar class, the title section with ...