xng-breadcrumb

KO | EN

gitlite — search

#python #deep-learning #swift #ios #cli #game #c-sharp #css #javascript #android #wordpress-plugin #crawler

★ 246 Open GitHub ↗

A lightweight, configurable and reactive breadcrumbs for Angular 2+

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

<h1 align="center" style="color: teal">xng-breadcrumb</h1>

> 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_)

</div>

## 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 `<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](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)):

<table>
 <tbody>
 <tr>
 <td align="center" valign="top" width="14.28%"><a href="https://www.linkedin.com/in/udayvunnam/"><img src="https://avatars.githubusercontent.com/u/20707504?v=4?s=100" width="100px;" alt="Uday Vunnam"/> Uday Vunnam</a> <a href="https://github.com/udayvunnam/xng-breadcrumb/commits?author=udayvunnam" title="Code">💻</a> <a href="https://github.com/udayvunnam/xng-breadcrumb/commits?author=udayvunnam" title="Documentation">📖</a> <a href="#maintenance-udayvunnam" title="Maintenance">🚧</a></td>
 <td align="center" valign="top" width="14.28%"><a href="https://github.com/anthonythiry"><img src="https://avatars.githubusercontent.com/u/28025542?v=4?s=100" width="100px;" alt="anthonythiry"/> anthonythiry</a> <a href="https://github.com/udayvunnam/xng-breadcrumb/commits?author=anthonythiry" title="Code">💻</a></td>
 <td align="center" valign="top" width="14.28%"><a href="https://github.com/dedrazer"><img src="https://avatars.githubusercontent.com/u/23525418?v=4?s=100" width="100px;" alt="dedrazer"/> dedrazer</a> <a href="https://github.com/udayvunnam/xng-breadcrumb/commits?author=dedrazer" title="Code">💻</a></td>
 <td align="center" valign="top" width="14.28%"><a href="https://dannyfeliz.com/"><img src="https://avatars.githubusercontent.com/u/5460365?v=4?s=100" width="100px;" alt="Danny Feliz"/> Danny Feliz</a> <a href="https://github.com/udayvunnam/xng-breadcrumb/commits?author=DannyFeliz" title="Documentation">📖</a></td>
 <td align="center" valign="top" width="14.28%"><a href="https://github.com/kapenzo"><img src="https://avatars.githubusercontent.com/u/16196222?v=4?s=100" width="100px;" alt="Kapsky"/> Kapsky</a> <a href="https://github.com/udayvunnam/xng-breadcrumb/commits?author=kapenzo" title="Code">💻</a></td>
 <td align="center" valign="top" width="14.28%"><a href="https://github.com/andreicojea"><img src="https://avatars.githubusercontent.com/u/4705022?v=4?s=100" width="100px;" alt="Andrei Cojea"/> Andrei Cojea</a> <a href="https://github.com/udayvunnam/xng-breadcrumb/commits?author=andreicojea" title="Documentation">📖</a></td>
 <td align="center" valign="top" width="14.28%"><a href="https://github.com/jontze"><img src="https://avatars.githubusercontent.com/u/42588836?v=4?s=100" width="100px;" alt="Jonathan"/> Jonathan</a> <a href="https://github.com/udayvunnam/xng-breadcrumb/commits?author=jontze" title="Code">💻</a></td>
 </tr>
 <tr>
 <td align="center" valign="top" width="14.28%"><a href="https://pavankjadda.dev/"><img src="https://avatars.githubusercontent.com/u/17564080?v=4?s=100" width="100px;" alt="Pavan Kumar Jadda"/> Pavan Kumar Jadda</a> <a href="https://github.com/udayvunnam/xng-breadcrumb/commits?author=pavankjadda" title="Code">💻</a></td>
 <td align="center" valign="top" width="14.28%"><a href="https://github.com/LeonFretter"><img src="https://avatars.githubusercontent.com/u/40633983?v=4?s=100" width="100px;" alt="Leon Fretter"/> Leon Fretter</a> <a href="https://github.com/udayvunnam/xng-breadcrumb/commits?author=LeonFretter" title="Code">💻</a></td>
 <td align="center" valign="top" width="14.28%"><a href="https://github.com/lukasmatta"><img src="https://avatars.githubusercontent.com/u/4323927?v=4?s=100" width="100px;" alt="Lukáš Matta"/> Lukáš Matta</a> <a href="https://github.com/udayvunnam/xng-breadcrumb/commits?author=lukasmatta" title="Documentation">📖</a></td>
 <td align="center" valign="top" width="14.28%"><a href="https://github.com/cskiwi"><img src="https://avatars.githubusercontent.com/u/847540?v=4?s=100" width="100px;" alt="Glenn Latomme"/> Glenn Latomme</a> <a href="https://github.com/udayvunnam/xng-breadcrumb/commits?author=cskiwi" title="Code">💻</a></td>
 <td align="center" valign="top" width="14.28%"><a href="https://github.com/ovidiu-cssrl"><img src="https://avatars.githubusercontent.com/u/48490266?v=4?s=100" width="100px;" alt="Ovidiu Haureș"/> Ovidiu Haureș</a> <a href="https://github.com/udayvunnam/xng-breadcrumb/commits?author=ovidiu-cssrl" title="Code">💻</a></td>
 <td align="center" valign="top" width="14.28%"><a href="https://github.com/KristofGilis"><img src="https://avatars.githubusercontent.com/u/2454275?v=4?s=100" width="100px;" alt="Kristof Gilis"/> Kristof Gilis</a> <a href="https://github.com/udayvunnam/xng-breadcrumb/commits?author=KristofGilis" title="Code">💻</a></td>
 <td align="center" valign="top" width="14.28%"><a href="https://github.com/aliaksanderkazlou"><img src="https://avatars.githubusercontent.com/u/11739292?v=4?s=100" width="100px;" alt="Aleksander"/> Aleksander</a> <a href="https://github.com/udayvunnam/xng-breadcrumb/commits?author=aliaksanderkazlou" title="Code">💻</a></td>
 </tr>
 </tbody>
 <tfoot>
 <tr>
 <td align="center" size="13px" colspan="7">
 <img src="https://raw.githubusercontent.com/all-contributors/all-contributors-cli/1b8533af435da9854653492b1327a23a4dbd0a10/assets/logo-small.svg">
 <a href="https://all-contributors.js.org/docs/en/bot/usage">Add your contributions</a>
 </img>
 </td>
 </tr>
 </tfoot>
</table>

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 <username> <contribution>
# Example:
pnpm all-contributors add jfmengels code,doc
```

xng-breadcrumb

Explore Similar Repositories

Was this content helpful?

Recent Feedback

Download README