contextual-navbar

components.cx-navbar.js

import Ember from 'ember';

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

components.navbar.cx-navdropdown.js

import Ember from 'ember';

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

components.navbar.cx-navpill.js

import Ember from 'ember';

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

components.navbar.navdropdown.navdropdown-toggle.js

import Ember from 'ember';

export default Ember.Component.extend({
});

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"}] 
}
});

routes.index.js

import Ember from 'ember';

export default Ember.Route.extend({
});

styles.app.css

body {
  margin: 12px 16px;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 12pt;
}

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;
}

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

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

.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;
}

templates.application.hbs

<br>
{{outlet}}
<br>
<br>

templates.components.cx-navbar.hbs

<ul class="navbar-ul">
{{yield 
		(hash 
    		pill=(component 'navbar/cx-navpill' pillSelected=(action "pathSelected"))
        
        dropdown=(component 'navbar/cx-navdropdown' optionSelected=(action "pathSelected"))
    )
}}
</ul>

templates.components.navbar.cx-navdropdown.hbs

<a class="" {{action "toggleDropdown"}} tabindex="0">{{dropdown.name}} <i class="fa-icon fa {{if options "fa-chevron-up" "fa-chevron-down"}}"></i></a>
{{#if options}}
    <ul class="navdropdown-dropdown ">
    {{#each dropdown.options as |option|}}
      <li class="nav-option"><a tabindex="0" href="" {{action "optionSelected" option.path}}>{{option.name}}</a></li>
     {{/each}}
    </ul>
{{/if}}

templates.components.navbar.cx-navpill.hbs

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

templates.components.navbar.navdropdown.navdropdown-toggle.hbs

{{yield}}

templates.index.hbs

{{#cx-navbar pathToGo=pathToGo as |navbar|}}
	{{navbar.pill navItems=navItems}}
  {{navbar.dropdown dropdown=navDropdownItems}}
  {{navbar.pill navItems=navItemsTwo}}
  {{navbar.dropdown dropdown=navDropdownTwo}}
{{/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"
  }
}