ember-template-bread-crumbs

The default blueprint for ember-cli addons.

Usage no npm install needed!

<script type="module">
  import emberTemplateBreadCrumbs from 'https://cdn.skypack.dev/ember-template-bread-crumbs';
</script>

README

Ember Template Bread Crumbs

Build Status npm version Ember Observer Score

Template based breadcrumbs for Ember.

Compatibility

  • Ember.js v3.16 or above
  • Ember CLI v3.16 or above
  • Node.js v10 or above

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.