nav-dropdown

components.dropdown.dropdown-list.js

import Ember from 'ember';

export default Ember.Component.extend({
  actions:{
  	optionSelected: function(path){
     this.sendAction("optionSelected", path);
    }
  
  }
});

components.dropdown.dropdown-toggle.js

import Ember from 'ember';

export default Ember.Component.extend({
  tagName:'a',
  click: function(){
  	this.toggleProperty('options');
  }
});

components.dropdown.toggle.toggle-icon.js

import Ember from 'ember';

export default Ember.Component.extend({
  tagName:''
});

components.nav-dropdown.js

import Ember from 'ember';

export default Ember.Component.extend({
  classNames:['nav-dropdown'],
  tagName:'li',
  actions:{
  	optionSelected: function(path){
    	this.set('navpath', 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({
   navDropdownItems:{
"name":"Mammals", 
"options":[{"name":"Herbivores", "path":"herbivores"},{"name":"Carnivores", "path":"carnivores"},{"name":"Omnivores", "path":"omnivores"}] 
},
  
  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;
}

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

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
  border: 1px solid black;
  padding: 5px;
}

.nav-dropdown{
margin: 40px;
}

ul.nav{
 display:flex;
  border:none;
}

templates.application.hbs

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

templates.components.dropdown.dropdown-list.hbs

{{#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.dropdown.dropdown-toggle.hbs

{{yield 
		(hash 
        icon=(component 'dropdown/toggle/toggle-icon' options=options)
    )
}}

templates.components.dropdown.toggle.toggle-icon.hbs

<i class="fa-icon fa {{if options "fa-chevron-up" "fa-chevron-down"}}"></i>

templates.components.nav-dropdown.hbs

{{yield 
		(hash 
    		toggle=(component 'dropdown/dropdown-toggle' options=dOptions)
        
        
        list=(component 'dropdown/dropdown-list' options=dOptions optionSelected=(action "optionSelected"))
    )
}}

templates.index.hbs

<p>Breaking a dropdown into as many smaller parts as possible lets the user use it in many different ways <br><i>Ex: The icon being placed on any side of the text as desired</i></p>


<nav>
  <ul class="nav">
    {{#nav-dropdown navpath=navpath as |dropdown|}}
      {{#dropdown.toggle as |toggle|}}
        {{#toggle.icon}}{{/toggle.icon}}{{navDropdownItems.name}}
      {{/dropdown.toggle}}
      {{#dropdown.list dropdown=navDropdownItems}}{{/dropdown.list}}
    {{/nav-dropdown}}
    {{#nav-dropdown navpath=navpath as |dropdown|}}
      {{#dropdown.toggle as |toggle|}}
        {{navDropdownTwo.name}} {{#toggle.icon}}{{/toggle.icon}}
      {{/dropdown.toggle}}
      {{#dropdown.list dropdown=navDropdownTwo}}{{/dropdown.list}}
    {{/nav-dropdown}}
  </ul>
</nav>

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

twiddle.json

{
  "version": "0.13.0",
  "EmberENV": {
    "FEATURES": {}
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "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"
  }
}