<div class="off-canvas-content" data-off-canvas-content>
<!-- Info Banner For Announcements or Links -->
<!-- <a href="http://zurb.com/article/1416/foundation-6-is-here" id="notice">
- <div class="info">
- <h5>Foundation 6 is here!</h5>
- </div>
- </a> -->
+ <div class="info">
+ <h5>Foundation 6 is here!</h5>
+ </div>
+ </a> -->
- {{> navigation}}
- {{> mobile-navigation}}
+ {{> navigation}}
+ {{> mobile-navigation}}
- <input type="text" class="docs-search" data-docs-search placeholder="Find a page, component, variable, mixin, function...">
+ <input type="text" class="docs-search" data-docs-search placeholder="Find a page, component, variable, mixin, function...">
- <div class="expanded row">
- <div class="medium-9 large-10 medium-push-3 large-push-2 columns">
- {{> body}}
- </div>
- <div class="medium-3 large-2 medium-pull-9 large-pull-10 columns">
- {{> component-list}}
+ <div class="expanded row">
+ <div class="medium-9 large-10 medium-push-3 large-push-2 columns">
+{{> body}}
+ </div>
+ <div class="medium-3 large-2 medium-pull-9 large-pull-10 columns">
+ {{> component-list}}
+ </div>
+ </div>
+
+ {{> footer}}
</div>
+ </div>
- </div></div>
- {{> footer}}
-</div>
-
-</div></div>
-
-<script>
-var _gaq = _gaq || [];
-_gaq.push(
- ['_setAccount', 'UA-2195009-2'],
- ['_trackPageview'],
- ['b._setAccount', 'UA-2195009-27'],
- ['b._trackPageview']
-);
-(function() {
- var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
- ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
- var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-})();
-</script>
++ <script>
++ var _gaq = _gaq || [];
++ _gaq.push(
++ ['_setAccount', 'UA-2195009-2'],
++ ['_trackPageview'],
++ ['b._setAccount', 'UA-2195009-27'],
++ ['b._trackPageview']
++ );
++ (function() {
++ var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
++ ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
++ var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
++ })();
++ </script>
- <script>
- var _gaq = _gaq || [];
- _gaq.push(
- ['_setAccount', 'UA-2195009-2'],
- ['_trackPageview'],
- ['b._setAccount', 'UA-2195009-27'],
- ['b._trackPageview']
- );
- (function() {
- var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
- ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
- var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
- })();
- </script>
-
- <script src="assets/js/vendor.js"></script>
- <script src="assets/js/foundation.js"></script>
- <script src="assets/js/docs.js"></script>
- </body>
-<script src="assets/js/vendor.js"></script>
-<script src="assets/js/foundation.js"></script>
-<script src="assets/js/docs.js"></script>
-<script type="text/javascript" src="https://intercom.zurb.com/scripts/zcom.js"></script>
++ <script src="assets/js/vendor.js"></script>
++ <script src="assets/js/foundation.js"></script>
++ <script src="assets/js/docs.js"></script>
++ <script type="text/javascript" src="https://intercom.zurb.com/scripts/zcom.js"></script>
+ </body>
</html>
---
+## Active State
+
+Add the class `.active` to any `<li>` to create an active state. You could apply this server-side to mark the active page, or dynamically with JavaScript.
+
+```html_example
+<ul class="menu">
+ <li class="active"><a>Home</a></li>
+ <li><a>About</a></li>
+ <li><a>Nachos</a></li>
+</ul>
+```
+
+---
+
+ ## Text
+
+ Because the padding of the menu item is applied to the `<a>`, if you try to add an item that's text only, it will be misaligned. To get around this, add the class `.menu-text` to any `<li>` that doesn't have a link inside of it.
+
+ ```html_example
+ <ul class="menu">
+ <li class="menu-text">Site Title</li>
+ <li><a href="#">One</a></li>
+ <li><a href="#">Two</a></li>
+ <li><a href="#">Three</a></li>
+ </ul>
+ ```
+
+ ---
+
## Icons
Menu items can have icons. Wrap the text of the item in a `<span>`, and then add an `<img>` element before the `<span>`. If you're using the Foundation icon font, the `<img>` will be an `<i>` instead.