ui-router-breadcrumbs demo

ui-router-breadcrumbs

Installation

Installation can be done via package managers such as npm or yarn

  npm install ui-router-breadcrumbs --save
  # or
  yarn add ui-router-breadcrumbs
  

Usage

import the modules required for ui-router-breadcrumbs

  <link rel="stylesheet" href="ui-router-breadcrumbs.min.css">

  <script src="angular.min.js"></script>
  <script src="angular-ui-router.min.js"></script>
  <script src="ui-router-breadcrumbs.min.js"></script>
      

add the uiBreadcrumbs dependency to the module

  angular.module('myApp', ['uiBreadcrumbs'])
      

in your router config

  $stateProvider.state('app.home', {
    url: '/home',
    data: {
      label: 'Home', //label to show in breadcrumbs
    },
    templateUrl: 'templates/home.html',
  })
      

in your html

  <ui-breadcrumb></ui-breadcrumb>
      

Options

you can specify to show or hide abstract states

can provide globally as

  const config = breadcrumbProvider => {
    breadcrumbProvider.configure({
      abstract: true
    });
  };

  config.$inject = ['breadcrumbProvider'];
  app.config(config);