angular-breadcrumbs-light
    TypeScript 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

    24

    Version

    1.0.5

    License

    MIT

    Unpacked Size

    318 kB

    Total Files

    38

    Last publish

    Collaborators

    • mopc