« Back

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



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.



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.



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.


Centered pagination

You can also center your pagination by adding .pagination-centered to its outer div.