Security News
Create React App Officially Deprecated Amid React 19 Compatibility Issues
Create React App is officially deprecated due to React 19 issues and lack of maintenance—developers should switch to Vite or other modern alternatives.
ember-breadcrumbs
Advanced tools
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:
"post.edit"
) that the crumb will link to.
This property is optional; the default will be the route's path.{{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.
If you find yourself needing to add some logic to change what text is displayed in a breadcrumb (or what path it links to, or the model it provides), there is no need to do any thing special.
Just define your breadCrumb
property (or any other properties) as a computed property that
depends on the other information you need. Your breadcrumbs will automatically update in
realtime, thanks to Ember.
breadCrumb: Ember.computed("model.name", {
get() {
let modelName = this.get("model.name");
return `Blog Post: ${modelName}`;
}
}),
breadCrumbModel: Ember.computed.alias("model")
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:
{{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:
link-to
.link-to
. May not be present.Some things would be nice to have:
I'm also open to handing off the stewardship of this addon. I haven't been able to give the time that this project needs.
This project is licensed under the MIT License.
FAQs
A breadcrumbs component for Ember.js
The npm package ember-breadcrumbs receives a total of 20 weekly downloads. As such, ember-breadcrumbs popularity was classified as not popular.
We found that ember-breadcrumbs demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 2 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Create React App is officially deprecated due to React 19 issues and lack of maintenance—developers should switch to Vite or other modern alternatives.
Security News
Oracle seeks to dismiss fraud claims in the JavaScript trademark dispute, delaying the case and avoiding questions about its right to the name.
Security News
The Linux Foundation is warning open source developers that compliance with global sanctions is mandatory, highlighting legal risks and restrictions on contributions.