@label="Choose a destination..." @items={{this.places}}> <:banner> <h3>Too much free time?</h3> Become a virtual tour guide and share your passion with the world! </:banner> <:item as |item|> <img src={{item.image}} alt="" width="80" height="80"> <h3>{{item.name}}</h3> <p>{{item.description}}</p> </:item> <:empty> <h3>Sorry, we are sold out.</h3> <a href="...">Join our mailing list</a> to be notified of new tours! </:empty> </DropDown> app/templates/index.hbs <div class="drop-down" ...attributes> <!-- Omitted: same markup for button as before --> {{#if this.expanded}} <div class="banner">{{yield to="banner"}}</div> <ul role="listbox" aria-labelledby="{{this.id}}-button" tabindex="-1"> {{#each @items as |item|}} <li role="option" {{on "click" (fn this.select item)}}> {{yield item to="item"}} </li> {{else}} <li>{{yield to="empty"}}</li> {{/each}} </ul> {{/if}} app/components/drop-down.hbs Destination Where would be the perfect destination for your
virtual vacation? Choose a destination... Too much free time? Become a virtual tour guide and share your passion with the world! Sorry, we are sold out. Join our mailing list to be notified of new tours!