Have ideas to improve npm?Join in the discussion! »

angular-breadcrumbs-lightTypeScript icon, indicating that this package has built-in type declarations

1.0.5 • Public • Published

Angular Breadcrumbs Light

GitHub version npm version GitHub demo GitHub license

Demo

See demo here

Description

Easy to use breadcrumbs for Angular.

The package includes:

  • Service: just call it in some root component and it will be returning current breadcrumbs array
  • Breadcrumbs component: just import and use it. Could be manually configured and styled
  • TS Types for both

Installation

 
npm i angular-breadcrumbs-light
 

Breadcrumbs service

Provides function getBreadcrumbs, which returns an array of breadcrumbs.

Example (Argument Routes is specified in next subsection):

 
// Usage
const crumbs = getBreadcrumbs(Routes, window.location.pathname);
 
// Returned array
[
  { link: '/', title: 'Home', icon: 'person', iconClass: 'material-icons' },
  { link: '/clients', title: 'Clients', icon: '...' },
  { link: '/clients/1', title: 'Client № - 1, welcome!', icon: '...' }
]
 

There is only 1 required arguments and 5 optional:

Title Type Description Default
routes * array array of route objects (see example below) -
fullUrl string current location full path (see example below)
base string if project's base-href is provided manually, put it here also -
notFoundTitle string title for not found route 'Page Not Found'
notFoundIcon string icon for not found route undefined
notFoundClass string icon class for not found route undefined

Routes

Example:

 
const Routes = [
  { title: 'Home', link: '/', icon: 'string', iconClass: 'material-icons' },
  { title: 'Clients', link: '/clients', icon: '...', children: [
    { title: 'Client № - ', suffix: ', welcome!', link: '/clients/:id', icon: '...' },
    { title: 'Settings', link: '/clients/settings', icon: '...' }
  ] }
];
 

Fields:

Title Type Description
link * string breadcrumb link
title string breadcrumb title
suffix string breadcrumb suffix (added at the end of output breadcrumb title)
icon string breadcrumb icon
iconClass string breadcrumb icon class
children array array of objects, similar to Routes, for nested routes

Features:

  • If title is not provided, link will be used as breadcrumb title (First letter uppercased)
  • For root route ('' or '/') if title not provided, the crumb title will be 'Root' by default
  • link field may contain dynamic routes (ex.: '/route/:id')
  • For dynamic routes 'title' field will be used as prefix for current pathname (first letter uppercased), if provided

FullUrl

It should be a current location. DEFAULT VALUE IS: window.location.pathname.

Important

Example (Play with example here:

 

Breadcrumbs component

Provides a ready to use component. Can be styled and configured.

Play with example here.

 
<angular-breadcrumbs-light [routes]="routes"></angular-breadcrumbs-light>
 

There is only 1 required argument. And bunch of optional:

Title Type Description Default
routes * array array of route objects (see example above) -
base string if project's base-href is provided manually, put it here also -
separator string separator for crumbs /
separatorClass string separator class for crumbs -
icons boolean whether to show icons true
titles boolean whether to show titles true
noTitlesOnMobile boolean if true - hide titles when device width <= 600px (do not forget to provide icons in such case) false
notFoundTitle string title for not found pages 'Page Not Found'
notFoundIcon string icon for not found pages -
notFoundIconClass string icon class for not found pages -
customClasses object classes for each element of Breadcrumbs component -

Similar to first required argument for Breadcrumbs service - Routes array.

customClasses

Title Type Description Html Element
root string class for root element nav
list string class for list element ul
link string class for link element a
currentLink string class for currentLink element li
icon string class for icon element span (holder for icon)
title string class for title element span
separator string class for separator element li (holder for separator)

License

This project is licensed under the terms of the MIT license.

Install

npm i angular-breadcrumbs-light

DownloadsWeekly Downloads

25

Version

1.0.5

License

MIT

Unpacked Size

318 kB

Total Files

38

Last publish

Collaborators

  • avatar