Ember-more-menu

A horizontal responsive menu component which hides items that don't fit in a dropdown more menu.

Demo

Installation

In your application's directory

• ember install ember-more-menu

Examples

const items = [{
  text: "Home",
  linkTo: "ROUTE_NAME"
}, {
  text: "About",
  linkTo: "ROUTE_NAME"
}, {
  text: "Contact",
  linkTo: "ROUTE_NAME"
}, {
  text: "External link",
  href: "#"
}, {
  text: "Static text"
}];

Basic example

{{more-menu items=items}}

---

Advanced example

{{#more-menu
  items=items
  moreButtonText="More options"
  moreButtonClass="btn"
  targetAttachmentPosition="bottom center"
  attachmentPosition="top center"
  as |section|
}}
  {{#if (eq section "menu")}}
    <ul class="nav flex-nowrap">
      {{#each items as |item|}}
        <li>
          <a href="#" class="nav-link">{{item.text}}</a>
        </li>
      {{/each}}
    </ul>
  {{/if}}

  {{#if (eq section "more")}}
    <ul class="nav flex-column">
      {{#each items as |item|}}
        <li class="nav-item">
          <a href="#" class="nav-link">{{item.text}}</a>
        </li>
      {{/each}}
    </ul>
  {{/if}}
{{/more-menu}}

View Demo

• Clone this repo: git clone https://github.com/mayko780/ember-more-menu.git
• cd ember-more-menu
• npm install
• ember serve
• Visit http://localhost:4200.

For more information on using ember-cli, visit http://ember-cli.com/.