Breadcrumbs in Ember.js

After searching for a way to display breadcrumbs with Ember, I was left disappointed with what I found.

I wanted something that would:

• Be isolated, so I didn’t have to clutter up my ApplicationRoute or commit other such crimes.
• Be flexible in how the breadcrumbs are named (e.g., I want to include some data from my models).
• Be flexible in which routes actually display breadcrumbs.
• Be flexible in which route a breadcrumb will link to (since it may not always be the same route).
• Automatically update whenever the route changes, regardless of which template the breadcrumbs are placed in.

So, I wrote my own.

My Solution

By observing the application controller’s currentPath and inspecting the router, I could determine which routes were currently active and look up their associated controllers.

In my opinion, it makes sense to allow the controllers backing your routes to dictate your breadcrumbs. This provides a large amount of flexibility. Simply define one of these properties on a route’s controller, and it will receive a breadcrumb:

• breadCrumb – The text to display for your breadcrumb. This is required to display a breadcrumb. A computed property may be defined, in which case the breadcrumb text will automatically observe it. If you don’t specify this property, the route will be skipped, but any routes nested underneath will still have the opportunity to specify a breadcrumb.
• breadCrumbPath – This property is optional. The controller’s route’s path is inferred by default, but you may specify any path, e.g., “response.edit”

By leveraging Ember’s built-in dependency injection, I was able to design my component so that it requires no external inputs. Simply toss the bread-crumbs component into any of your templates and everything works.

How to Get It

Check it out on Github. You can also install the component via Bower: ember-breadcrumbs.