Foundation Navigation Testing

Navigation

Direct users around in style. There are navigation options for a number of situations, and everything is designed to work cross-device.

Nav Bar

The default top nav bar for Foundation includes the main nav options as well as hover dropdowns that support either a list of anchors or arbitrary content (even Grid content).

Nav Item 1
Nav Item 2
Nav Item 3

Regular Dropdown

This is example text. This is example text. This is example text. This is example text. This is example text. This is example text. This is example text. This is example text.

This is example text. This is example text. This is example text. This is example text. This is example text. This is example text. This is example text. This is example text.
Nav Item 4

Large Dropdown

This is example text. This is example text. This is example text. This is example text. This is example text. This is example text. This is example text. This is example text.

This is example text. This is example text. This is example text. This is example text. This is example text. This is example text. This is example text. This is example text.

This is example text. This is example text. This is example text. This is example text. This is example text. This is example text. This is example text. This is example text.

This is example text. This is example text. This is example text. This is example text. This is example text. This is example text. This is example text. This is example text.

Vertical Nav

The same nav bar seen above, with the same structure, can be made a vertical nav bar that still supports flyout content by adding a class of .vertical to the element.

Nav Item 1
Nav Item 2
Nav Item 3

Regular Dropdown

This is example text. This is example text. This is example text. This is example text. This is example text. This is example text. This is example text. This is example text.

This is example text. This is example text. This is example text. This is example text. This is example text. This is example text. This is example text. This is example text.
Nav Item 4

Side Nav

Side nav, like you'll see on the Foundation main site, is useful for sections either of a site or of the page.

Sub Nav

This simple subnav is great for moving between different states of a page.

Filter:: All; Active; Pending; Suspended

Pagination

Moving between pages has become less common with the advent of longer pages and AJAX loading, but it can still be useful for long repetitive listings or content.