https://github.com/udayvunnam/xng-breadcrumb

A lightweight, configurable and reactive breadcrumbs for Angular 2+
https://github.com/udayvunnam/xng-breadcrumb

angular angular-breadcrumb angular6 breadcrumb-labels breadcrumbs ng-breadcrumbs ngx

Last synced: 7 months ago
JSON representation

A lightweight, configurable and reactive breadcrumbs for Angular 2+

Host: GitHub
URL: https://github.com/udayvunnam/xng-breadcrumb
Owner: udayvunnam
License: mit
Created: 2019-04-27T16:08:53.000Z (about 7 years ago)
Default Branch: main
Last Pushed: 2025-02-08T07:13:11.000Z (over 1 year ago)
Last Synced: 2025-03-18T11:11:29.612Z (over 1 year ago)
Topics: angular, angular-breadcrumb, angular6, breadcrumb-labels, breadcrumbs, ng-breadcrumbs, ngx
Language: TypeScript
Homepage: https://udayvunnam.github.io/xng-breadcrumb
Size: 4.03 MB
Stars: 244
Watchers: 14
Forks: 63
Open Issues: 4
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: .github/contributing.md
- Funding: .github/FUNDING.yml
- License: LICENSE
- Code of conduct: .github/code_of_conduct.md
- Codeowners: .github/CODEOWNERS

Awesome Lists containing this project

awesome-angular - xng-breadcrumb - A lightweight, configurable and reactive breadcrumbs solution for Angular 2+ (Uncategorized / Uncategorized)
fucking-awesome-angular - xng-breadcrumb - Zero‑config, lightweight, configurable, reactive breadcrumbs for Angular 6+. (Third Party Components / Router)
awesome-angular - xng-breadcrumb - Zero‑config, lightweight, configurable, reactive breadcrumbs for Angular 6+. (Third Party Components / Router)

README

xng-breadcrumb

> A lightweight, declarative, and dynamic breadcrumb solution for Angular 6+. [🌐 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 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.

## [💖 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