contextual-navbar

components.cx-navbar.js

import Ember from 'ember';

export default Ember.Component.extend({
  tagName: 'nav',
  actions:{
    pathSelected: function(path, hugeMenu){
      this.set('pathToGo', path);
    }
  }
});

components.navbar.cx-navdropdown.js

import Ember from 'ember';

export default Ember.Component.extend({
  classNames:['cx-navdropdown', 'navbar-li'],
  attributeBindings:['role:role'],
  options: false,
  tagName:'li',
  role: 'presentation',
  click(e){
  	
  },
  actions: {
    toggleDropdown: function(){
      this.toggleProperty('options');
    },
    
    optionSelected: function(path){
     this.sendAction("optionSelected", path);
    }
  }
});

components.navbar.cx-navicon.js

import Ember from 'ember';

export default Ember.Component.extend({
  tagName:'',
  actions:{
  	iconSelected: function(path){
    	this.sendAction('iconSelected', path);
    }
  }
});

components.navbar.cx-navpill.js

import Ember from 'ember';

export default Ember.Component.extend({
  tagName:'',

  actions:{
  	pillSelected: function(path){
    	this.sendAction('pillSelected', path);
    }
  }
});

controllers.application.js

import Ember from 'ember';

export default Ember.Controller.extend({
  appName: 'Ember Twiddle'
});

controllers.index.js

import Ember from 'ember';

export default Ember.Controller.extend({
  navItems: [{
  "name":"Fish",
  "id":"fish",
   "path":"fish"
  },{
  "name":"Birds",
  "id":"bird",
   "path":"birds"
  },{
  "name":"Insects",
  "id":"inse",
   "path":"insects"
  }],
  navDropdownItems:{
"name":"Mammals",
"options":[{"name":"Herbivores", "path":"herbivores"},{"name":"Carnivores", "path":"carnivores"},{"name":"Omnivores", "path":"omnivores"}] 
},
  navItemsTwo:[{
  "name":"Amphibians",
  "id":"amph",
   "path":"amphibians"
  }],
  navDropdownTwo:{
"name":"Reptiles", 
"options":[{"name":"Snakes", "path":"snakes"},{"name":"Crocodiles", "path":"crocodiles"},{"name":"Omnivores", "path":"omnivores"}] 
},
  
  navIcons: [{
  "name":"gift",
  "id":"gifted",
   "path":"gifted"
  }],
  
   navDropdownIconItems:{
"name":"Setting", 
    "icon": "cog",
"options":[{"name":"Extinct", "path":"extinct"},{"name":"Endangered", "path":"endangered"},{"name":"Poached", "path":"poached"}] 
},
});

styles.app.css

body {
  margin: 12px 16px;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 12pt;
}
.navdropdown-dropdown{
	background-color: #e69182;
  position: absolute;
  margin-top: 30px;
}
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}
.fa-icon{display: inline}
li.nav-pill {
   display: inline;
  padding:10px;
  margin:0;
  transition: 0.5s ease;
}

li.nav-option {
   display: block;
}

a {
    color:inherit;
    text-decoration: none;
  cursor:pointer;
}

nav {
  padding: 10px;
  
  //border: 1px solid brown;
}

.navbar-ul {
  display: flex;
    flex-direction: row;
  justify-content: space-around;
  background-color: #E35B44;
  //background-color:gray;
}

.sub-menu-division{
	background-color: #e69182;
  display: flex;
  justify-content: space-around;
}

.navbar-li {

}

.nav-pill.active {
	background-color:#77EDF4;
}

.cx-navdropdown {
  padding:10px;
  display: flex;
  flex-direction: column;
}

.cx-navdropdown ul{
	border: 1px solid black;
  padding: 5px;
  //margin: 5px;
}

.cx-navdd-button{
	background-color: white;
  border: none;
}

templates.application.hbs

{{outlet}}
<br>
<br>

templates.components.cx-navbar.hbs

<ul class="navbar-ul" role="menubar">
{{yield 
		(hash 
    		pill=(component 'navbar/cx-navpill' pillSelected=(action "pathSelected"))
        
        dropdown=(component 'navbar/cx-navdropdown' optionSelected=(action "pathSelected"))
        
        icon=(component 'navbar/cx-navicon' iconSelected=(action "pathSelected"))
    )
}}
</ul>
{{!--{{#if hugeMenu}}
  <div class="sub-menu-division">
    <ul>
      <li>Coffee</li>
      <li>Tea</li>
      <li>Milk</li>
    </ul>

    <ul>
      <li>Coffee</li>
      <li>Tea</li>
      <li>Milk</li>
    </ul>

    <ul>
      <li>Coffee</li>
      <li>Tea</li>
      <li>Milk</li>
    </ul>
  </div>
{{/if}}--}}

templates.components.navbar.cx-navdropdown.hbs

<button class="cx-navdd-button" {{action "toggleDropdown"}} tabindex="0" aria-haspopup="true" aria-label={{dropdown.name}} aria-expanded="{{options}}" role="menuitem">
	{{unless srOnly dropdown.name}} 
	<i class="fa-icon fa {{if dropdown.icon (concat 'fa-' dropdown.icon) (if options "fa-chevron-up" "fa-chevron-down")}} fa-{{size}}"></i>
</button>
{{#if options}}
    <ul class="navdropdown-dropdown" role="menu">
    {{#each dropdown.options as |option|}}
      <li class="nav-option" role="presentation">
      	<a tabindex="0" role="menuitem" href="" {{action "optionSelected" option.path}} >{{option.name}}</a>
      </li>
    {{/each}}
    </ul>
{{/if}}

templates.components.navbar.cx-navicon.hbs

{{#each navIcons as |icon|}}
<li class="nav-pill navbar-li" role="presentation">
	<a class="" href="" {{action "iconSelected" icon.path}} aria-label={{icon.name}} tabindex="0" role="menuitem">
		<i class="fa-icon fa fa-{{icon.name}} fa-{{size}}"></i>
	</a>
</li>
{{/each}}

templates.components.navbar.cx-navpill.hbs

{{#each navItems as |pill|}}
<li class="nav-pill navbar-li" role="presentation"><a href="" {{action "pillSelected" pill.path}} role="menuitem">{{pill.name}}</a></li>
{{/each}}

templates.index.hbs

{{#cx-navbar pathToGo=pathToGo hugeMenu=true as |navbar| }}
	{{navbar.pill navItems=navItems }}
  {{navbar.dropdown dropdown=navDropdownItems}}
  {{navbar.pill navItems=navItemsTwo}}
  {{navbar.icon navIcons=navIcons size="lg"}}
  {{navbar.dropdown dropdown=navDropdownTwo}}
  {{navbar.dropdown dropdown=navDropdownIconItems size="lg" srOnly=true}}
{{/cx-navbar}}

<p>The selection was made to go to route <strong style="background-color:yellow;">/{{pathToGo}}</strong></p>

twiddle.json

{
  "version": "0.13.0",
  "EmberENV": {
    "FEATURES": {}
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "devDependencies": {
    "ember-font-awesome": "^3.0.5"
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
    "ember": "2.16.2",
    "ember-template-compiler": "2.16.2",
    "ember-testing": "2.16.2",
    "ember-font-awesome": "https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css"
  },
  "addons": {
    "ember-data": "2.16.3"
  }
}