Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

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: 2 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 (over 5 years ago)
Default Branch: main
Last Pushed: 2024-08-12T14:54:05.000Z (5 months ago)
Last Synced: 2024-10-13T17:10:27.079Z (3 months ago)
Topics: angular, angular-breadcrumb, angular6, breadcrumb-labels, breadcrumbs, ng-breadcrumbs, ngx
Language: TypeScript
Homepage: https://udayvunnam.github.io/xng-breadcrumb
Size: 3.82 MB
Stars: 241
Watchers: 14
Forks: 62
Open Issues: 2
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)
awesome-angular - xng-breadcrumb - Zero config breadcrumb solution. A lightweight, configurable and reactive breadcrumbs for Angular 6 and beyond. (Table of contents / Third Party Components)
fucking-awesome-angular - xng-breadcrumb - Zero config breadcrumb solution. A lightweight, configurable and reactive breadcrumbs for Angular 6 and beyond. (Table of contents / Third Party Components)

README

        
xng-breadcrumb




> A lightweight, declarative and dynamic breadcrumbs solution for Angular 6 and beyond. 

[![CI](https://github.com/udayvunnam/xng-breadcrumb/actions/workflows/ci.yml/badge.svg)](https://github.com/udayvunnam/xng-breadcrumb/actions/workflows/ci.yml)

[![npm version](https://img.shields.io/npm/v/xng-breadcrumb.svg)](https://www.npmjs.com/package/xng-breadcrumb)

![bundle size](https://img.shields.io/bundlephobia/minzip/xng-breadcrumb)

[![license](https://img.shields.io/npm/l/xng-breadcrumb.svg)](https://github.com/udayvunnam/xng-breadcrumb/blob/main/LICENSE)

![npm downloads](https://img.shields.io/npm/dt/xng-breadcrumb?style=social)

![Twitter follow](https://img.shields.io/twitter/follow/udayvunnam_?style=social)

[![All Contributors](https://img.shields.io/badge/all_contributors-13-orange.svg?style=flat-square)](#contributors-)



## Why Choose Breadcrumbs?

**Simplify Navigation**: Breadcrumbs are vital in applications with deep navigation hierarchies, offering users an intuitive way to traverse back to higher levels effortlessly.

## Documentation

For a step by step guide on integrating xng-breadcrumb into your Angular application, visit the [Documentation](https://udayvunnam.github.io/xng-breadcrumb).

## Demo App

Explore our [Demo App](https://xng-breadcrumb.vercel.app/) - showcasing the power of `xng-breadcrumb` in an Angular setup. Experience seamless breadcrumb navigation as you browse through various links!



## Features

- ✅ **Zero configuration**: Just add `` anywhere in the app.Breadcrumb labels are automatically generated by analyzing Angular Route configurations.

- ✅ **Custom labels**:Define custom labels for each route via Angular Route Configurations, enhancing breadcrumb clarity and relevance.

- ✅ **Update labels dynamically**: 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 QueryParams and Fragement while navigating via breadcrumbs

- ✅ **SSR**: Supports server side rendering with nguniversal

## ❤️ [Become a Sponsor!](http://paypal.me/udayvunnam)

Thanks goes to these wonderful people ([emoji key](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}
💻

    

  

  

    

      

        

          Add your contributions

        

      

    

  

This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!

To add new contributor _username_, who made a contribution of type _contribution_:

`pnpm all-contributors add  ` Example: `pnpm all-contributors add jfmengels code,doc`