ui-router-breadcrumbs

This is a simple directive that creates breadcrumbs on the fly for AngularJs pages using angular-ui-router

live demo here

Getting Started

Installation

You can directly clone/download here

git clone git@github.com:sibiraj-s/ui-router-breadcrumbs.git

or use cdn

Minified

//cdn.jsdelivr.net/npm/ui-router-breadcrumbs@latest/ui-router-breadcrumbs.min.js
//cdn.jsdelivr.net/npm/ui-router-breadcrumbs@latest/ui-router-breadcrumbs.min.css

Pretty Printed

//cdn.jsdelivr.net/npm/ui-router-breadcrumbs@latest/ui-router-breadcrumbs.js
//cdn.jsdelivr.net/npm/ui-router-breadcrumbs@latest/ui-router-breadcrumbs.css

or

Install 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.

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

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

add uiBreadcrumbs dependency to the module

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

in routes config

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

and in your html

<ui-breadcrumb></ui-breadcrumb>

Options

you can specify to show or hide abstract states

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

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