npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

ember-breadcrumb-trail

v1.0.0

Published

The default blueprint for Embroider v2 addons.

Downloads

14,251

Readme

ember-breadcrumb-trail

CI Code Style: Prettier

ember-breadcrumb-trail is a minimalistic but very flexible breadcrumb management solution. It provides only 2 helpers but they give you complete control over the HTML structure, the components you use to render that structure and the needed data to make it all work. Bring your own everything!

This addon is heavily inspired by ember-page-title and the already existing breadcrumb addons.

Compatibility

  • Ember.js v3.16 or above (lower versions might work, but aren't tested)
  • Ember CLI v3.16 or above
  • Node.js v12 or above
  • Works with Embroider (safe and optimized)
  • Publishes Glint types

Installation

ember install ember-breadcrumb-trail

Usage

{{breadcrumb}} helper

This helper allows you to add breadcrumbs and is the equivalent of the page-title helper but for breadcrumbs.

Positional argument(s)

Positional arguments are used as the title for the breadcrumb. Multiple positional arguments will be combined into a single title.

{{breadcrumb "Home"}}
{{! "Home" }}

{{breadcrumb "Hottest JS framework 🔥: " this.hottestFramework}}
{{! "Hottest JS framework 🔥: Ember" }}

The title can be accessed with the title property of the breadcrumb object.

Named arguments

Any data that you need to render your breadcrumbs can be passed in as named arguments. This can be used to pass route information so that the breadcrumb can be linked to it.

The named arguments will be available under the data property of the breadcrumb object.

{{breadcrumbs}} helper

This helper simply returns the registered breadcrumbs and can be used wherever you want to display them. The breadcrumb data can easily be looped over with {{#each}} and combined with other helpers if extra data manipulation is needed.

Returns

Array of registered breadcrumbs (objects)

Examples

a11y

This simple example implements an a11y friendly breadcrumb structure using Ember's <LinkTo> component and the {{has-next}} helper from ember-composable-helpers to determine if a breadcrumb is the last breadcrumb in the list.

<nav aria-label="Breadcrumb">
  <ol>
    {{#each (breadcrumbs) as |breadcrumb|}}
      <li>
        <LinkTo
          @route={{breadcrumb.data.route}}
          aria-current={{if (not (has-next breadcrumb (breadcrumbs))) "page"}}
        >
          {{breadcrumb.title}}
        </LinkTo>
      </li>
    {{/each}}
  </ol>
</nav>

{{! index.hbs }}
{{breadcrumb "Home" route="index"}}

{{! about.hbs }}
{{breadcrumb "About" route="about"}}

ember-link

A similar example where ember-link is used instead of <LinkTo>.

<nav aria-label="Breadcrumb">
  <ol>
    {{#each (breadcrumbs) as |breadcrumb|}}
      <li>
        <a
          href={{breadcrumb.data.link.href}}
          aria-current={{if (not (has-next breadcrumb (breadcrumbs))) "page"}}
          {{on "click" breadcrumb.data.link.transitionTo}}
        >
          {{breadcrumb.title}}
        </a>
      </li>
    {{/each}}
  </ol>
</nav>

{{! blog.hbs }}
{{breadcrumb "Blog" link=(link "blog")}}

{{! blog/post.hbs }}
{{breadcrumb this.post.title link=(link "blog.post" this.post.id)}}

TypeScript and Glint

Loose-mode usage

If your project uses loose-mode templates, you can merge in the template registry interface provided by ember-breadcrumb-trail:

// <your-app>/types/glint.d.ts
import '@glint/environment-ember-loose';
import '@glint/environment-ember-template-imports';

import type EmberBreadcrumbTrailRegistry from 'ember-breadcrumb-trail/template-registry';

declare module '@glint/environment-ember-loose/registry' {
  export default interface Registry extends EmberBreadcrumbTrailRegistry {
    /* your local loose-mode entries here */
  }
}

Strict-mode usage

To use the helpers in strict-mode templates, you can use the shorter import path:

import { breadcrumb, breadcrumbs } from 'ember-breadcrumb-trail';

Contributing

See the Contributing guide for details.

License

This project is licensed under the MIT License.