A lightweight, declarative, and dynamic breadcrumb solution for Angular 6+. 🌐 View on npm
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.
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
Get started in minutes with our full Documentation, including usage, configuration, and examples.
Experience it firsthand in the Demo App
-
✅ Zero Config Setup: Just drop
<xng-breadcrumb>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 Seperators: 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.
If xng-breadcrumb saves you hours or adds polish to your app, consider becoming a sponsor. Every contribution helps!
Thanks to all the amazing folks who make this project better! (💪):
Want to see your name here? We welcome all-contributions!
Adding a contributor is easy:
pnpm all-contributors add <username> <contribution>
# Example:
pnpm all-contributors add jfmengels code,doc