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

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.

• Site Title
• One
• Two
• Three

• 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.

• Item 1
  • Item 1A Loooong
  • Item 1 sub
    • Item 1 subA
    • Item 1 subB
    • Item 1 sub
      • Item 1 subA
      • Item 1 subB
    • Item 1 sub
      • Item 1 subA
      • Item 1 subB

        </ul>
      </li>
      <li><a href="#0">Item 1B</a></li>
    </ul>
    

    • Item 2
      • Item 2A
      • Item 2B
    • Item 3
      • Item 3A
      • Item 3B
    • Item 4

    ---

    Drilldown Menu

    The drilldown menu plugin (data-drilldown) converts a nested menu into a series of sliding menus. Clicking an item slides the next level menu into view. Learn more about the drilldown menu.

    • Item 1
      • Item 1A
        • Item 1Aa
        • Item 1Ba
        • Item 1Ca
        • Item 1Da
        • Item 1Ea
      • Item 1B
      • Item 1C
      • Item 1D
      • Item 1E
    • Item 2
      • Item 2A
      • Item 2B
      • Item 2C
      • Item 2D
      • Item 2E
    • Item 3
      • Item 3A
      • Item 3B
      • Item 3C
      • Item 3D
      • Item 3E
    • Item 4

    ---

    Accordion Menu

    The accordion menu plugin (data-accordion-menu) converts a nested menu into a series of collapsed accordions. Clicking an item slides down the nested menu. Learn more about the accordion menu.
  • Item 1
    • Item 1A
      • Item 1Ai
      • Item 1Aii
      • Item 1Aiii
    • Item 1B
    • Item 1C
  • Item 2
    • Item 2A
    • Item 2B
  • Item 3

  ---

  Responsive Navigation

  Each of the above three patterns has a use in a specific context. But some patterns only work at certain screen sizes. For example, dropdown menus don't work as well on smaller screens, but the same navigation items might work better as a drilldown or an accordion menu at that screen size.

  Our responsive menu plugin (data-responsive-menu) allows you to take a Menu, and assign different navigation patterns to it at different screen sizes. In the below example, a drilldown menu changes to a dropdown menu at larger screen sizes. Learn more about the responsive Menu plugin.

  • Item 1
    • Item 1A
      • Item 1A
      • Item 1B
      • Item 1C
      • Item 1D
      • Item 1E
    • Item 1B
  • Item 2
    • Item 2A
    • Item 2B
  • Item 3
    • Item 3A
    • Item 3B

  ---

  In other situations, you may wish to always display a menu on a larger screen, but hide that same menu behind a click toggle on smaller screens. You can do this with the responsive toggle plugin (data-responsive-toggle). This plugin works with any container, not just a menu. Learn more about the responsive toggle plugin.

  To see the below example in action, scale your browser down. The top bar will be replaced by a smaller title bar. Clicking the icon inside the title bar reveals the top bar.

  Menu
  • Site Title
  • One
    • One
    • Two
    • Three
  • Two
  • Three
  • Search

  ---

  Sticky Navigation

  See the documentation for the Sticky plugin to see how to easily make a sticky nav bar.