https://github.com/bagaar/ember-breadcrumbs
Template based breadcrumb management for Ember applications.
https://github.com/bagaar/ember-breadcrumbs
breadcrumbs ember-addon
Last synced: 11 months ago
JSON representation
Template based breadcrumb management for Ember applications.
- Host: GitHub
- URL: https://github.com/bagaar/ember-breadcrumbs
- Owner: Bagaar
- License: mit
- Created: 2018-10-20T08:43:35.000Z (over 7 years ago)
- Default Branch: main
- Last Pushed: 2024-09-23T22:46:01.000Z (almost 2 years ago)
- Last Synced: 2025-03-25T18:40:15.189Z (over 1 year ago)
- Topics: breadcrumbs, ember-addon
- Language: TypeScript
- Homepage:
- Size: 2.39 MB
- Stars: 16
- Watchers: 5
- Forks: 3
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE.md
Awesome Lists containing this project
README
# @bagaar/ember-breadcrumbs
[](https://github.com/bagaar/ember-breadcrumbs/actions?query=workflow%3ACI)
[](https://badge.fury.io/js/%40bagaar%2Fember-breadcrumbs)
Template based breadcrumb management for Ember applications.
## Table of Contents
- [Compatibility](#compatibility)
- [Installation](#installation)
- [Usage](#usage)
- [Usage Inside an Engine](#usage-inside-an-engine)
- [Contributing](#contributing)
- [License](#license)
## Compatibility
- Ember.js v4.8 or above
- Embroider or ember-auto-import v2
## Installation
```shell
npm install -D @bagaar/ember-breadcrumbs
```
```shell
pnpm add -D @bagaar/ember-breadcrumbs
```
```shell
yarn add -D @bagaar/ember-breadcrumbs
```
## Usage
### 1\. Defining Where You Want the Breadcrumbs to Be Rendered
```handlebars
{{! app/templates/application.hbs }}
```
> **NOTE:** It's also possible to render multiple instances of the `` component.
### 2\. Leaving Behind Breadcrumbs
```handlebars
{{! app/templates/foo.hbs }}
Foo
```
```handlebars
{{! app/templates/foo/bar.hbs }}
Bar
```
> **NOTE:** The `` component is responsible for rendering the provided `` component into all instances of the `` component using Ember's `{{in-element}}` helper.
#### Advantages
Leaving behind breadcrumbs like this might seem very verbose, but it's actually pretty flexible and has some advantages:
1. Because you leave behind breadcrumbs inside templates, the addon doesn't have to take async model hooks into account
2. Because you use Ember's `` component to define breadcrumb links, you have complete control over:
- **how you define them** (inline vs. block)
- **how they should work** (route, dynamic segments, query parameters, ...)
- **how they should look like** (text, icons, additional CSS class names, ...)
#### Rendered Output
The rendered output will be:
```html
```
### 3\. Styling the Breadcrumbs
The addon doesn't ship with default styling, this should be done inside the consuming project.
### 4\. `` arguments
Name | Description | Type
:-------------| :---------------------------------------------------------------------------| :-----
**itemClass** | The class that will be added to all `` components | String
**linkClass** | The class that will be yielded to the ``'s block content | String
## Usage Inside an Engine
### 1\. Add `@bagaar/ember-breadcrumbs` to Your Engine's `dependencies`
This will make all `@bagaar/ember-breadcrumbs` components available inside the engine.
```json
{
"dependencies": {
"@bagaar/ember-breadcrumbs": "*"
}
}
```
### 2\. Make the `breadcrumbs` Service Available Inside the Engine
This will make sure that the same instance of the `breadcrumbs` service is used inside the engine and inside the host application.
```javascript
// app/app.js
export default class App extends Application {
engines = {
'engine-name': {
dependencies: {
services: ['breadcrumbs'],
},
},
};
}
```
```javascript
// lib/engine-name/addon/engine.js
export default class EngineName extends Engine {
dependencies = {
services: ['breadcrumbs'],
};
}
```
**That's it! Now you should be able to leave behind breadcrumbs inside the engine and render them inside the host application.**
## Contributing
See the [Contributing](CONTRIBUTING.md) guide for details.
## License
This project is licensed under the [MIT License](LICENSE.md).