xng-breadcrumb

> A lightweight, declarative and dynamic breadcrumbs solution for Angular 6 and beyond. [![CircleCI](https://circleci.com/gh/udayvunnam/xng-breadcrumb.svg?shield&circle-token=:circle-token)](https://circleci.com/gh/udayvunnam/xng-breadcrumb) [![npm version](https://img.shields.io/npm/v/xng-breadcrumb.svg)](https://www.npmjs.com/package/xng-breadcrumb) ![bundle size](https://img.shields.io/bundlephobia/minzip/xng-breadcrumb) [![license](https://img.shields.io/npm/l/xng-breadcrumb.svg)](https://github.com/udayvunnam/xng-breadcrumb/blob/main/LICENSE) ![npm downloads](https://img.shields.io/npm/dt/xng-breadcrumb?style=social) ![Twitter follow](https://img.shields.io/twitter/follow/udayvunnam_?style=social)

## About - In applications with deep navigation hierarchy, it is essential to have breadcrumbs. - Breadcrumbs easily allow going back to states higher up in the hierarchy. ## Demo [Live Demo](https://xng-breadcrumb.netlify.com) - A demo app showcasing `xng-breadcrumb` usage in an Angular app. Navigate through different links to see breadcrumbs behavior.

## Documentation [Documentation](https://udayvunnam.github.io/xng-breadcrumb/) ## Features - ✅ **Zero configuration**: Just add `` anywhere in the app. Breadcrumb labels are auto-generated by analyzing Angular Route configuration in your App. - ✅ **Custom labels**: Each route can have a custom label defined via Angular Route Config. The labels will be picked automatically while forming breadcrumbs. - ✅ **Update labels dynamically**: Change breadcrumbs dynamically using `BreadcrumbService.set()`. You can either use _route path_ or _path alias_ to change breadcrumb for a route. - ✅ **Skip breadcrumb**: Skip specific routes from displaying in breadcrumbs, conditionally. - ✅ **Disable breadcrumb**: Disable specific routes so that navigation is disbaled to intermediate routes. - ✅ **Customization**: Customize breadcrumb template to show **icons with label**, **use pipes on text**, **add i18n with ngx-translate**, etc. - ✅ **Styling**: **Separator** and **Styles** can be customized with ease. - ✅ **QueryParams and Fragment**: Preserves QueryParams and Fragemnet while navigating via breadcrumbs - ✅ **SSR**: Supports server side rendering with nguniversal ## ❤️ [Become a Sponsor!](http://paypal.me/udayvunnam) ## Contributors ✨ Thanks goes to these wonderful people ([emoji key](https://allcontributors.org./docs/en/emoji-key)):

_{Uday Vunnam}
💻 📖 🚧

_anthonythiry
💻

_dedrazer
💻

_{Danny Feliz}
📖

This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!

params-xng-breadcrumb

Downloads in past1 Month3 Months6 Months1 Year2 Years5 YearsAll time

Stats

Sick of boring JavaScript newsletters?

Downloads in past