biofriction-wp-theme/node_modules/foundation-sites/docs/pages/navigation.md

9.4 KiB

title description
Navigation Foundation is bundled with many simple navigation patterns, which can be combined to form more complex, robust responsive navigation solutions.

Basics: Menu

The Menu is an all-purpose navigation component. It can be aligned horizontally or vertically, can be nested, and supports icons. Learn more about the Menu.

All menus use the ul > li > a pattern. The markup is a little strict, but this makes it easy to attach a navigation plugin to any menu, as you'll see below.

Here's a basic Menu.

<ul class="menu">
  <li><a href="#">Item One</a></li>
  <li><a href="#">Item Two</a></li>
  <li><a href="#">Item Three</a></li>
</ul>

To nest menus, add a new <ul> inside of an <li>, after the <a> inside.

<ul class="menu">
  <li>
    <a href="#">Item One</a>
    <ul class="menu">
      <li><a href="#">Item One-one</a></li>
    </ul>
  </li>
  <li><a href="#">Item Two</a></li>
  <li><a href="#">Item Three</a></li>
</ul>

Top Bar

Top bar is a simple wrapper around these menu patterns. It supports a left-hand and right-hand section, which collapse on top of each other on small screens. Learn more about the top bar.

  • Search

Menu Plugins

The basic Menu can be enhanced with one of three Menu plugins. All three use the exact same markup to create a different style of multi-tier navigation.

Dropdown Menu

The dropdown menu plugin (data-dropdown-menu) converts a nested menu into a series of dropdown menus. The nested menus can be opened through hover, click, or keyboard. Learn more about the dropdown menu.