xng-breadcrumb

> A lightweight, declarative, and dynamic breadcrumb solution for Angular. [🌐 View on npm](https://www.npmjs.com/package/xng-breadcrumb) [![CI](https://github.com/udayvunnam/xng-breadcrumb/actions/workflows/ci-e2e.yml/badge.svg)](https://github.com/udayvunnam/xng-breadcrumb/actions/workflows/ci-e2e.yml) [![npm version](https://img.shields.io/npm/v/xng-breadcrumb.svg)](https://www.npmjs.com/package/xng-breadcrumb) [![license](https://badgen.net/github/license/micromatch/micromatch)](https://github.com/udayvunnam/xng-breadcrumb/blob/main/LICENSE) ![All Contributors](https://badgen.net/github/contributors/udayvunnam/xng-breadcrumb) ![npm downloads](https://img.shields.io/npm/dt/xng-breadcrumb?style=social) [![Twitter follow](https://img.shields.io/twitter/follow/udayvunnam_?style=social)](https://x.com/udayvunnam_)

## What is xng-breadcrumb **xng-breadcrumb** is a plug-and-play breadcrumb component built specifically for Angular applications. It automatically generates navigation breadcrumbs from your route configurations—so you can stop manually stitching them together. Whether you're building a dashboard, a blog, or an enterprise-grade app, this library helps keep your navigation intuitive and dynamic. ## 🔍 Why Breadcrumbs? Breadcrumbs provide users with: ✅ Context — See where they are in your app's hierarchy ✅ Navigation — Quickly move to parent or sibling routes ✅ Clarity — Reduced cognitive load in deep nested UIs ## 📖 Documentation Get started in minutes with our full [Documentation](https://udayvunnam.github.io/xng-breadcrumb), including usage, configuration, and examples. ## 🧪 Live Demo Experience it firsthand in the [Demo App](https://xng-breadcrumb.vercel.app/)

## ✨ Features - ✅ **Zero Config Setup**: Just drop `` anywhere in the app. - ✅ **Auto Labels** — Automatically generates labels from Angular route configs. - ✅ **Custom Labels** — Easily override route labels. - ✅ **Dynamic Updates**: Change breadcrumb labels dynamically using `BreadcrumbService.set()`, utilizing either _route path_ or _route alias_. - ✅ **Skip breadcrumb**: Conditionally exclude specific routes from breadcrumb display - ✅ **Disable breadcrumb**: Can disable specific routes in breadcrumbs to prevent navigation to intermediate states . - ✅ **Customization**: Customize breadcrumb template to display **icons with label**, **apply text formatting using pipes**, **integrate i18n with ngx-translate**, and more. - ✅ **Styling and Separators**: Easily customize breadcrumb separators and styles to match your application's design - ✅ **QueryParams and Fragment**: Preserves params/fragments across navigation. - ✅ **SSR Ready**: Fully compatible with Angular Universal. ## [💖 Support the Project](http://paypal.me/udayvunnam) If xng-breadcrumb saves you hours or adds polish to your app, consider [becoming a sponsor](http://paypal.me/udayvunnam). Every contribution helps! ## 👏 Contributors Thanks to all the amazing folks who make this project better! ([💪](https://allcontributors.org/docs/en/emoji-key)):

_{Uday Vunnam} 💻 📖 🚧	_anthonythiry 💻	_dedrazer 💻	_{Danny Feliz} 📖	_Kapsky 💻	_{Andrei Cojea} 📖	_Jonathan 💻
_{Pavan Kumar Jadda} 💻	_{Leon Fretter} 💻	_{Lukáš Matta} 📖	_{Glenn Latomme} 💻	_{Ovidiu Haureș} 💻	_{Kristof Gilis} 💻	_Aleksander 💻
Add your contributions

Want to see your name here? We welcome [all-contributions](https://github.com/all-contributors/all-contributors)! Adding a contributor is easy: ```bash pnpm all-contributors add # Example: pnpm all-contributors add jfmengels code,doc ```