Angular Breadcrumbs Light

Demo

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.