JavaScript is required for the navigation collapse Be sure to add a role="navigation" to the navbar to help with accessibility. Requires a /data/navigation.yaml file to be present. Basically checks the YAML for Divider, Dropdown or Menu Item then displays according to the YAML.
Declaring active links in both Angular - with directory indexes or normal requires that the path defined matches the current_page.url
= codeBlender "navbar", "molecule", data.navigation
<nav class='navbar' id='navbar' role='navigation'>
<div class='container'>
<div class='navbar-header'>
<button aria-expanded='false' class='navbar-toggle collapsed' data-target='#navbar-collapse' data-toggle='collapse' type='button'>
<span class='sr-only'>Toggle Navigation</span>
<span class='icon-bar'></span>
<span class='icon-bar'></span>
<span class='icon-bar'></span>
</button>
</div>
<div class='navbar-collapse collapse' id='navbar-collapse'>
<ul class='nav navbar-left navbar-nav'>
<li>
<a href='/'>
Home
</a>
</li>
<li>
<a href='/atom/atom.html'>
Atom
</a>
</li>
<li>
<a href='/molecule/molecule.html'>
Molecule
</a>
</li>
<li>
<a href='/organism/organism.html'>
Organism
</a>
</li>
<li>
<a href='/template/template.html'>
Template
</a>
</li>
<li class='dropdown'><a aria-expanded='false' aria-haspopup='true' class='dropdown-toggle' data-toggle='dropdown' href='javascript:;' role='button' type='button'>
Social
<span class='dropdown__icon'></span>
</a>
<ul aria-labelledby='dropdownMenu1' class='dropdown-menu' role='menu'>
<li ui-sref-active='active'>
<a href="/social/disqus/disqus.html">Disqus
</a></li>
<li ui-sref-active='active'>
<a href="/social/facebook/facebook.html">Facebook
</a></li>
<li ui-sref-active='active'>
<a href="/social/firebase/firebase.html">Firebase
</a></li>
<li ui-sref-active='active'>
<a href="/social/flikr/flikr.html">Flikr
</a></li>
<li ui-sref-active='active'>
<a href="/social/google/google.html">Google
</a></li>
<li ui-sref-active='active'>
<a href="/social/gravatar/gravatar.html">Gravatar
</a></li>
<li ui-sref-active='active'>
<a href="/social/linkedin/linkedin.html">LinkedIn
</a></li>
<li ui-sref-active='active'>
<a href="/social/mailchimp/mailchimp.html">Mailchimp
</a></li>
<li ui-sref-active='active'>
<a href="/social/pinterest/pinterest.html">Pinterest
</a></li>
<li ui-sref-active='active'>
<a href="/social/skype/skype.html">Skype
</a></li>
<li ui-sref-active='active'>
<a href="/social/treatwell/treatwell.html">Treatwell
</a></li>
<li ui-sref-active='active'>
<a href="/social/twitter/twitter.html">Twitter
</a></li>
<li ui-sref-active='active'>
<a href="/social/youtube/youtube.html">YouTube
</a></li>
</ul>
</li>
<li>
<a href='/football/football.html'>
Football
</a>
</li>
<li>
<a href='/media/media.html'>
Media
</a>
</li>
<li>
<a href='/mobile/mobile.html'>
Mobile
</a>
</li>
</ul>
<form action='/search.html' class='navbar-form navbar-right' role='search'>
<div class='form-group' show-errors='{showSuccess: true}'>
<label class='control-label sr-only' for='q'>
Search
</label>
<div class='input-group'>
<span class='fa fa-search input-group-addon' ng-hide='loading'></span>
<input autocomplete='on' class='form-control' id='q' name='q' placeholder='Search' type='text'>
</div>
</div>
<button class='btn btn-default' type='button'>
Search
</button>
</form>
</div>
</div>
</nav>
| Title | URL |
|---|---|
| Bootstrap navigation bar | http://getbootstrap.com/components/#navbar |
| Bootstrap example | https://getbootstrap.com/examples/navbar/ |
| Task | Date |
|---|---|
| Active menu item needs to be completed | |
| General images and icons need to work for each item and as an item in there own right | |
| When multiple items are floated right then they cross over - need to batch these up in one section - right or left in the YAML | |
| Need the ability to add images as placeholders. | |
| Active links for dropdown menus needs sorting | |
| Icon to collapse any child sidebar | |
| Icons left or right to bring in offcanvas menus | |
| Confirm whether each of the elements in the YAML are required now, comment them | |
| Add the shopping widget to the navigation again | |
| Make sure navbar-btn is added to the button in a navbar - test | |
| Make sure navbar-form is added to form elements in the navbar - test | |
| Add the ability to do navbar-text and navbar-link in the navbar |