How to create a link-to drop-down in ember.js?

@denis 

To create a link-to drop-down in Ember.js, you can use the built-in link-to helper provided by Ember. Here's an example of how you can create a drop-down menu with link-to:

1. Create a template for the drop-down menu in your Ember application. In this example, we will create a drop-down with three links:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

{{#if showDropdown}}
<div class="dropdown">
  <button class="dropbtn">Dropdown</button>
  <div class="dropdown-content">
    {{#link-to 'route1'}}Link 1{{/link-to}}
    {{#link-to 'route2'}}Link 2{{/link-to}}
    {{#link-to 'route3'}}Link 3{{/link-to}}
  </div>
</div>
{{/if}}

1. In your controller or component, define a property to control the visibility of the drop-down menu:

1
2
3

export default Ember.Controller.extend({
  showDropdown: false
});

1. Add an action to toggle the visibility of the drop-down menu in your controller or component:

1
2
3
4
5
6
7
8
9

export default Ember.Controller.extend({
  showDropdown: false,
  
  actions: {
    toggleDropdown() {
      this.toggleProperty('showDropdown');
    }
  }
});

1. Add an event handler in your template to trigger the toggleDropdown action:

1

<button {{action "toggleDropdown"}}>Toggle Dropdown</button>

With these steps, you should now have a link-to drop-down menu in your Ember.js application that is visible when the user clicks on the "Toggle Dropdown" button.