An Ember.js component for adding breadcrumbs to your app.
Installation is accomplished by using ember-cli addons. From within your
ember-cli app, do:
ember install:addon ember-breadcrumbs
If you have an older version of ember-cli, this may not work. If you're sure that your version of ember-cli supports addons, then you may be able to use this in lieu of upgrading:
npm install --save-dev ember-cli
But you should probably just upgrade.
To add the breadcrumbs to your app, simply throw the component into one of your
templates: {{bread-crumbs}}.
Don't worry about which template. It will automatically update itself as your route changes. There are no options to provide to the component.
For an example, check out the sample app.
To display a bread crumb, you define properties on the controller associated with a route. When that route (or a route nested underneath it) is active, the bread crumb will be displayed.
The properties are:
- breadCrumb: The text to display. Required.
- breadCrumbPath: The path (e.g.,
"post.edit") that the crumb will link to. This property is optional; the default will be the route's path. - breadCrumbModel: An object that will be passed into the
{{link-to}}helper. This property is optional.
If the breadCrumb property is not specified, then no crumb will be displayed.
Note that this means, by default, no crumbs will be displayed.
Sometimes you might need to display multiple breadcrumbs from the same controller.
To accomplish this, you can define the breadCrumbs property on your controller.
This property should be an array of objects (one object per crumb) that contain the following attributes:
- label: The text to display as the bread crumb. Required.
- path: The path that the crumb should link to. Optional; if not specified, the controller's route's path will be used instead.
- model: An object that should be passed into
{{link-to}}. Optional.
ember-breadcrumbs is styled, by default, for
Foundation's Breadcrumbs.
Thanks to ember-cli's addon support, it's now quite easy to replace this with
your own markup. Simply add a template to your project at the path:
app/templates/components/bread-crumbs.hbs
Your template can reference breadCrumbs, which is an array of objects containing
the following properties:
- label: The title of the breadcrumb.
- path: The path that the crumb should link to. Can pass to
link-to. - model: The model object that can be passed to
link-to. May not be present. - linkable: True unless the controller's breadCrumbPath was false.
- isCurrent: True for the most specific (last) bread crumb, otherwise false.
MIT License.