Foundation already includes the ability to have a fixed top nav bar by just wrapping it in a
<div class="fixed"> element.
However, Foundation doesn't include the ability to use nav bars as footers, or to have them fixed to the bottom of the screen; a common scenario for mobile web apps.
To make a bottom bar, create a standard Foundation top-bar at the bottom of the page, and add the
bottom-bar class to it.
Yes, it's a little awkward to have
<nav class="top-bar bottom-bar">, but just go with it for now.
To make it fixed to the bottom of the window, wrap it in
In order to demonstrate fixed bottom bar on this page, we need this page to be taller than your screen height, so that you can scroll the page. Here's a tall picture of a kitten.
Note that fixed toolbars can be a bit complicated on some older mobile browsers, due to their lack of support for the
position: fixed and known issues with scrolling. See jQuery Mobile's notes about mobile browser support for fixed toolbars.