A lightweight, declarative, and dynamic breadcrumb solution for Angular. 🌐 View on npm

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, including usage, configuration, and examples.

🧪 Live Demo

Experience it firsthand in the Demo App

✨ Features

• ✅ 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 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

If xng-breadcrumb saves you hours or adds polish to your app, consider becoming a sponsor. Every contribution helps!

👏 Contributors

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