Ember Template Bread Crumbs

Template based breadcrumbs for Ember.

Compatibility

• Ember.js v3.28 or above
• Embroider or ember-auto-import v2

Installation

ember install ember-template-bread-crumbs

Usage

Ember Template Breadcrumbs is inspired by ember-page-title and works in a similar way.

First you'll need to render your breadcrumbs somewhere:

{{! templates/application.hbs  }}
<BreadCrumbs />

And then define breadcrumbs for each route:

{{! templates/accounts.hbs  }}
{{bread-crumb "All accounts" route="accounts"}}

{{! templates/accounts/new.hbs  }}
{{bread-crumb "New" route="accounts.new"}}

If you'd like to display a static text instead of a link, just skip the route argument:

{{! templates/accounts/new.hbs  }}
{{bread-crumb "New"}}

Customization

You can easily customize your HTML by providing a block to the <BreadCrumbs /> component:

<ul>
  <BreadCrumbs as |item|>
    <li>
      <item.component class="my-item" />
    </li>
  </BreadCrumbs>
</ul>

The above will render as:

<ul>
  <li>
    <a class="my-item" href="/accounts">All accounts</a>
  </li>
  <li>
    <span class="my-item">New</span>
  </li>
</ul>

For more advanced HTML customization you can always extend the <BreadCrumbs /> component.

Contributing

See the Contributing guide for details.

License

This project is licensed under the MIT License.