@ovh-ux/ng-ui-router-breadcrumb

Display a breadcrumb based on the UI-Router state declaration.

Usage no npm install needed!

<script type="module">
  import ovhUxNgUiRouterBreadcrumb from 'https://cdn.skypack.dev/@ovh-ux/ng-ui-router-breadcrumb';
</script>

README

ng-ui-router-breadcrumb

Display a breadcrumb based on the UI-Router state declaration.

npm version Downloads Dependencies Dev Dependencies

Install

yarn add @ovh-ux/ng-ui-router-breadcrumb

Usage

breadcrumb resolve

import angular from 'angular';
import ngUiRouterBreadcrumb from '@ovh-ux/ng-ui-router-breadcrumb';
import uiRouter from '@uirouter/angularjs';

angular.module('myApp', [ngUiRouterBreadcrumb, uiRouter]).config(
  /* @ngInject */ ($stateProvider) => {
    $stateProvider.state('foo', {
      url: '/foo',
      template: '<h2>Foo</h2>',
      resolve: {
        breadcrumb() {
          return 'foo';
        },
      },
    });
  },
);

hideBreadcrumb resolve

This is meant to be used if you want to hide the breadcrumb for some state but display it for some children.

import angular from 'angular';
import ngUiRouterBreadcrumb from '@ovh-ux/ng-ui-router-breadcrumb';
import uiRouter from '@uirouter/angularjs';

angular.module('myApp', [ngUiRouterBreadcrumb, uiRouter]).config(
  /* @ngInject */ ($stateProvider) => {
    $stateProvider.state('foo', {
      url: '/foo',
      template: '<h2>Foo</h2>',
      resolve: {
        breadcrumb() {
          return 'foo';
        },
        hideBreadcrumb() {
          return true;
        },
      },
    });
  },
);

Test

$ yarn test

Related

Contributing

Always feel free to help out! Whether it's filing bugs and feature requests or working on some of the open issues, our contributing guide will help get you started.

License

BSD-3-Clause © OVH SAS