@luhuiguo/xng-breadcrumb
Advanced tools
A declarative and reactive breadcrumb approach for Angular 6 and beyond https://www.npmjs.com/package/xng-breadcrumb
A lightweight, declarative and dynamic breadcrumbs solution for Angular 6 and beyond. https://www.npmjs.com/package/xng-breadcrumb
A step by step guide to integrate xng-breadcrumb into your Angular application
Demo App - A demo app showcasing xng-breadcrumb library usage in an Angular app. Navigate through different links to see breadcrumbs behavior.
✅ Zero configuration: Just add <xng-breadcrumb></xng-breadcrumb> 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. These labels are used automatically while generating breadcrumbs.
✅ Update labels dynamically: Change breadcrumb labels dynamically using BreadcrumbService.set(). You can either use route path or route path alias to update label.
✅ 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
Thanks goes to these wonderful people (emoji key):
 Uday Vunnam 💻 📖 🚧 |  anthonythiry 💻 |  dedrazer 💻 |  Danny Feliz 📖 |  Kapsky 💻 |  Andrei Cojea 📖 |  Jonathan 💻 |
 Pavan Kumar Jadda 💻 🚧 |  Leon Fretter 💻 |
This project follows the all-contributors specification. Contributions of any kind welcome!
To add new contributor username, who made a contribution of type contribution:
pnpm all-contributors add <username> <contribution> Example: pnpm all-contributors add jfmengels code,doc
FAQs
A declarative and reactive breadcrumb approach for Angular 6 and beyond https://www.npmjs.com/package/xng-breadcrumb
The npm package @luhuiguo/xng-breadcrumb receives a total of 0 weekly downloads. As such, @luhuiguo/xng-breadcrumb popularity was classified as not popular.
We found that @luhuiguo/xng-breadcrumb demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Ransomware negotiators share how modern cybercriminals operate like corporations, using specialized teams, negotiation tactics, and reputation management.
Security News
PyPI confirms no security flaws were exploited in the Ultralytics supply chain attack and highlights improvements for safer package publishing.
Security News
Research
The Socket Research Team breaks down a malicious wrapper package that uses obfuscation to harvest credentials and exfiltrate sensitive data.
