1.0.5 • Published 4 years ago
angular-breadcrumbs-light v1.0.5
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-lightBreadcrumbs 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.
<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.