• This repository has been archived on 09/Nov/2021
  • Stars
    star
    167
  • Rank 226,635 (Top 5 %)
  • Language
    JavaScript
  • License
    MIT License
  • Created over 9 years ago
  • Updated about 3 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

Declarative breadcrumb navigation for Ember apps

ember-crumbly Download count all time CircleCI npm version Ember Observer Score

⚠️ This addon is no longer maintained, please look for an alternative.


Adds a Component to your app that displays the current route hierarchy (commonly known as breadcrumb navigation). Thanks to @rwjblue for providing the excellent addon name.

This addon provides a very declarative way to generate dynamic breadcrumbs.

$ ember install ember-crumbly

Compatibility

This addon is tested against the release, beta and canary channels, and explicitly tested against all versions beginning from ~1.11.x and up.

Usage

Basic usage

Basic usage is simple, just add the Component to any template in your application:

{{bread-crumbs tagName="ol" outputStyle="bootstrap" linkable=true}}
{{bread-crumbs tagName="ul" outputStyle="foundation" linkable=false}}

This will automatically output the current route's hierarchy as a clickable breadcrumb in a HTML structure that Bootstrap or Foundation expects. By default, the Component will simply display the route's inferred name.

For example, the route foo/bar/baz/1 will generate the following breadcrumb: Foo > Bar > Baz > Show. In most cases, this won't be exactly how you'd like it, so you can use the following declarative API to update the breadcrumb labels:

// foo/route.js

export default Ember.Route.extend({
  breadCrumb: {
    title: 'Animals',
    path: 'foo'
  }
});
// foo/bar/route.js

export default Ember.Route.extend({
  breadCrumb: {
    title: 'Quadrupeds'
  }
});
// foo/bar/baz/route.js

export default Ember.Route.extend({
  breadCrumb: {
    title: 'Cows'
  }
});
// foo/bar/baz/show/route.js

export default Ember.Route.extend({
  breadCrumb: {},
  afterModel(model) {
    const cowName = get(model, 'name'); // 'Mary'

    const cow = {
      title: cowName
    }
    
    set(this, 'breadCrumb', cow);
  }
});

Will generate the following breadcrumb: Animals > Quadrupeds > Cows > Mary.

Alternatively, breadCrumb can be defined as a computed property to reflect changes to the data:

// foo/bar/baz/show/route.js

export default Ember.Route.extend({
  breadCrumb: Ember.computed('controller.model.name', {
    get() {
      const cowName = get('controller.model.name') || 'Cow';

      const cow = {
        title: cowName
      }
    
      return cow;
    }
  }
});

In this case, if the name property of model is modified, the breadcrumb will be updated automatically.

Advanced usage

You can also pass in arbitrary properties to the breadCrumb POJO inside your route, and then pass in a custom template to the Component's block to render it the way you'd like:

// foo/bar/baz/show/route.js

export default Ember.Route.extend({
  breadCrumb: {},
  afterModel(model) {
    const cowName = get(model, 'name'); // 'Mary'
    const cowAge = get(model, 'age');   // 5
    const cowSay = get(model, 'say');   // 'Moo!'

    const cow = {
      name: cowName,
      age: cowAge,
      says: cowSay
    }
    
    set(this, 'breadCrumb', cow);
  }
});
{{#bread-crumbs outputStyle="bootstrap" linkable=true as |component cow|}}
  {{#bread-crumb route=cow breadCrumbs=component}}
    {{#if cow.title}}
      {{cow.title}}
    {{else}}
      {{cow.name}} ({{cow.age}}) says {{cow.says}}
    {{/if}}
  {{/bread-crumb}}
{{/bread-crumbs}}

Will generate the following breadcrumb: Animals > Quadrupeds > Cows > Mary (5) says Moo!

Choosing routes to display

By default, all routes are displayed in the breadcrumb. To have certain routes opt-out of this, simply set breadCrumb to null inside that particular route.

// foo/bar/route.js

export default Ember.Route.extend({
  breadCrumb: null
});

Will generate the following breadcrumb: Animals > Cows > Mary (5) says Moo!

Explicitly setting linkable routes

The Component's linkable attr applies to all routes by default. You can also explicitly set this on specific routes, by adding linkable: {true,false} to the breadCrumb POJO in your route.

// foo/bar/baz/show/route.js

export default Ember.Route.extend({
  breadCrumb: {
    title: 'Cows with a drinking addiction',
    linkable: false
  }
});
// foo/bar/route.js

export default Ember.Route.extend({
  breadCrumb: {
    title: 'Quadrupeds',
    linkable: false
  }
});

Will generate the following breadcrumb: _Animals_ > Quadrupeds > _Cows_ > Cows with a drinking addiction. (_name_ representing a link).

Set li classes

You can set your own li classes by passing in the appropriate crumbClass to the Component:

{{bread-crumbs tagName="ul" outputStyle="foundation" linkable=true crumbClass="breadcrumb-item"}}

Which generates the following HTML:

<!-- /foo/bar/baz/show/1 -->``
<ul class="breadcrumbs">
  <li class="breadcrumb-item">
    <a id="ember404" class="ember-view" href="/foo">Animals</a>
  </li>
  <li class="breadcrumb-item">
    <a id="ember405" class="ember-view" href="/foo/bar">Quadrupeds</a>
  </li>
  <li class="breadcrumb-item">
    <a id="ember406" class="ember-view" href="/foo/bar/baz">Cows</a>
  </li>
  <li class="breadcrumb-item">
    <a id="ember407" class="ember-view active" href="/foo/bar/baz/show">Mary</a>
  </li>
</ul>

Set a classes

You can set your own a classes by passing in the appropriate linkClass to the Component:

{{bread-crumbs tagName="ul" outputStyle="foundation" linkable=true linkClass="breadcrumb-link"}}

Which generates the following HTML:

<!-- /foo/bar/baz/show/1 -->``
<ul class="breadcrumbs">
  <li>
    <a id="ember404" class="ember-view breadcrumb-link" href="/foo">Animals</a>
  </li>
  <li>
    <a id="ember405" class="ember-view breadcrumb-link" href="/foo/bar">Quadrupeds</a>
  </li>
  <li>
    <a id="ember406" class="ember-view breadcrumb-link" href="/foo/bar/baz">Cows</a>
  </li>
  <li>
    <a id="ember407" class="ember-view breadcrumb-link active" href="/foo/bar/baz/show">Mary</a>
  </li>
</ul>

Reversing the order of breadcrumb

In certain scenarios, you might want to reverse the order of the breadcrumb (i.e. from RTL instead of LTR). To enable this, just set the reverse attr on the Component in your template:

{{bread-crumbs linkable=true reverse=true}}

Will generate the following breadcrumb: Mary < Cows < Quadrupeds < Animals. Note that you have to style this yourself (the Component is not responsible for generating the separators).

Installation

  • git clone <repository-url>
  • cd my-addon
  • yarn

Linting

  • yarn lint:js
  • yarn lint:js -- --fix

Running tests

  • ember test – Runs the test suite on the current Ember version
  • ember test --server – Runs the test suite in "watch mode"
  • ember try:each – Runs the test suite against multiple Ember versions

More Repositories

1

hiring-without-whiteboards

⭐️ Companies that don't have a broken hiring process
JavaScript
44,261
star
2

elixirconf-2016

ElixirConf 2016 summary
569
star
3

terraform

A simple plug for incrementally transforming an API into Phoenix. Check out the blog post:
Elixir
414
star
4

rustconf-2020

An aggregation of links that summarize RustConf 2020. Pull requests welcome!
356
star
5

emberconf-2016

A collection of links that cover what happened during EmberConf 2016
268
star
6

emberconf-2015

A collection of links that cover what happened during EmberConf 2015
244
star
7

component-best-practices

Code samples for Component Best Practices talk
HTML
129
star
8

elixirconf-2017

ElixirConf 2017 summary
109
star
9

emberconf-2017

A collection of links that summarize EmberConf 2017
JavaScript
101
star
10

ember-macaroni

Keep your app code DRY and copypasta free with computed property macaronis (macros)
JavaScript
99
star
11

no.lol

🍩 Lauren's personal blog
TypeScript
62
star
12

ember-hypersearch

Hyperspeed real-time search with caching
JavaScript
55
star
13

reverse_proxy

Terraform demo - incrementally replace your API with Phoenix
JavaScript
51
star
14

ember-lazy-video

Lazy load videos in an Ember app
JavaScript
46
star
15

ember-workshop

This is a workshop designed for intermediate developers who have worked on at least one large Ember app. The goal is to teach functional programming basics and to be able to use these ideas in your app.
45
star
16

monkers

Bytecode compiler and VM for the Monkeylang language, written in Rust
Rust
44
star
17

peedy

PDF watermarking microservice written in Elixir. For educational purposes only - not meant for production
Elixir
36
star
18

ember-deep-set

Deeply set values on an Ember Object or POJO
JavaScript
33
star
19

boba-js

Toy programming language. Now being reimplemented in Rust: https://github.com/poteto/monkers
TypeScript
30
star
20

advent-of-code-2018

Learning rust from scratch
Rust
21
star
21

ember-test-component

Test helper for using dependency injected components
JavaScript
21
star
22

hww-api

Small API to process additions to https://github.com/poteto/hiring-without-whiteboards and push them into an Airtable
JavaScript
18
star
23

ember-pipeline

Railway oriented programming in Ember
JavaScript
18
star
24

ember-toggle-helper

Dead simple toggle helper
JavaScript
16
star
25

poteto

13
star
26

ember-api-feature-flags

API based, read-only feature flags for Ember
JavaScript
12
star
27

validated-proxy

Typesafe, validated ES2015 proxies
TypeScript
11
star
28

elixir-workshop-pragdave

Elixir
6
star
29

vscode-tinacious-contrast

A high contrast version of Tinacious Design Syntax, a theme for VS Code
5
star
30

bitburner-scripts

Personal scripts for bitburner
JavaScript
5
star
31

rustic

Rust
3
star
32

ember-ja-query

JSON API response query interface
JavaScript
3
star
33

ember-gsg-reference

Getting started with Ember.js
CSS
3
star
34

flushed

flushed-app
JavaScript
2
star
35

orion_takehome

JavaScript
2
star
36

number1.pizza

TypeScript
2
star
37

-_-

💩
2
star
38

elixir-portal-test

Elixir
1
star
39

react-test

JavaScript
1
star
40

birthday-puzzle

Stupid little puzzle for my bf's birthday dinner location
JavaScript
1
star
41

ember-in-viewport-demo

Demo app for ember-in-viewport
CSS
1
star
42

remark-lint-hiring-without-whiteboards-links

JavaScript
1
star
43

e4e-2015

Notes from the engineers4engineers conference
1
star
44

styleguides

Styleguides for DockYard
1
star
45

ember-crumbly-demo

demo app for ember-crumbly
JavaScript
1
star
46

steamcircle

Expand your gaming circle
JavaScript
1
star
47

ember-redux-experiment

JavaScript
1
star
48

deadcrabs

JavaScript
1
star
49

ember-gsg

1
star