The topbar is only designed to have one per page, so we can't include a demo on this page due to the fact that we have one on the page already. Take a look at the code we have below and checkout our topbar to get a feel for how it works. The only thing about the one on this page is it doesn't have a dropdown.
The top bar is a pretty complex piece of magical UI goodness, which makes it really difficult to create a mixin from it. We rely on many presentational classes to accomplish the styles and there's a lot happening in the JS.
The top bar has four main elements, three of which are needed for proper functionality: ul.title-area, one of the section ul class="right/left elements and the li.toggle-topbar element that will expand the menu in the mobile layout. You can leave out the li class="name" as long as you include the .toggle-topbar element.
The top bar is built with a single nav element with a class of top-bar. It will take on full-browser width by default. To make the top bar stay fixed as you scroll, wrap it in div class="fixed". If you want your navigation to be set to your grid width, wrap it in div class="contain-to-grid". You may use fixed and contain-to-grid together.
When building your bar it is good to be aware of how many links your're going to need in it so you can customize your responsive breakpoint accordingly. Build your navigation with ul.left and/or ul.right depending where you want links. To add items, simply include li elements with and anchor inside them for your top-level. To build a dropdown menu, you'll need to add has-dropdown to the li and include ul.dropdown after that anchor. Add a class of active to mark the current page.
To make this navigation nice and flexible, we've included patterns for elements like buttons, inputs and dividers. To create dividers between your navigation, just add an empty li.divider and you'll get some separation. You can use a small Foundation button in the nav, just include has-button as a class for its parent li. You can include two different input types: search and text. To use these, add a class of search to the parent li.
You may also wrap your top bar in div class="contain-to-grid sticky" and put it anywhere within your markup. When the navigation hits the top of the browser, it will act like the fixed top bar and stick to the top as users continue to scroll.
We do include SCSS variable to help you control some of the styles for the top bar. Overall the styles are written mobile first, so they are much easier to override than the previous iteration of the top bar.
<%= code_example ' /* Background color for the top bar */ $topbar-bg: #111; /* Height and margin */ $topbar-height: 45px; $topbar-margin-bottom: emCalc(30px); /* Control Input height for top bar */ $topbar-input-height: 2.45em; /* Controlling the styles for the title in the top bar */ $topbar-title-weight: bold; $topbar-title-font-size: emCalc(17px); /* Set the link colors and styles for top-level nav */ $topbar-link-color: #fff; $topbar-link-weight: bold; $topbar-link-font-size: emCalc(13px); /* Style the top bar dropdown elements */ $topbar-dropdown-bg: #333; $topbar-dropdown-link-color: #fff; $topbar-dropdown-toggle-size: 5px; $topbar-dropdown-toggle-color: #fff; $topbar-dropdown-toggle-alpha: 0.5; /* Top menu icon styles */ $topbar-menu-link-transform: uppercase; $topbar-menu-link-font-size: emCalc(13px); $topbar-menu-link-weight: bold; $topbar-menu-link-color: #fff; $topbar-menu-icon-color: #fff; $topbar-menu-link-color-toggled: #888; $topbar-menu-icon-color-toggled: #888; /* Transitions and breakpoint styles */ $topbar-transition-speed: 300ms; $topbar-breakpoint: emCalc(940px); // Change to 9999px for always mobile layout', :css %>Note: emCalc(); is a function we wrote to convert px to em. It is included in _foundation-global.scss.
You don't need ths JS to create reveal modals with Foundation. The only reason you'll need to include foundation.reveal.js is if you want to add the ability to close an alert. You'll also need to make sure to include zepto.js and foundation.js above the alert plugin. Above your closing </body> tag include the following line of code and make sure you have the JS in your directory.
Read how to install Foundation JavaScript
Required Foundation Library: foundation.topbar.js
Top bar options can only be passed in during initialization at this time.
<%= code_example " { index : 0, stickyClass : 'sticky', init : false }", :json %>