JSPM

  • Created
  • Published
  • Downloads 16384
  • Score
    100M100P100Q192196F

Package Exports

  • xng-breadcrumb

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (xng-breadcrumb) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

xng-breadcrumb

A lightweight, declarative and dynamic breadcrumbs solution for Angular 6 and beyond. https://www.npmjs.com/package/xng-breadcrumb

CI npm version bundle size license npm downloads

Twitter follow

All 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.

Demo App

Explore our Demo App - showcasing the power of xng-breadcrumb in an Angular setup. Experience seamless breadcrumb navigation as you browse through various links!

xng-breadcrumb usage

Features

  • Zero configuration: Just add <xng-breadcrumb></xng-breadcrumb> 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!

Thanks goes to these wonderful people (emoji key):

Uday Vunnam
Uday Vunnam

💻 📖 🚧
anthonythiry
anthonythiry

💻
dedrazer
dedrazer

💻
Danny Feliz
Danny Feliz

📖
Kapsky
Kapsky

💻
Andrei Cojea
Andrei Cojea

📖
Jonathan
Jonathan

💻
Pavan Kumar Jadda
Pavan Kumar Jadda

💻
Leon Fretter
Leon Fretter

💻
Lukáš Matta
Lukáš Matta

📖
Glenn Latomme
Glenn Latomme

💻
Ovidiu Haureș
Ovidiu Haureș

💻
Kristof Gilis
Kristof Gilis

💻
Aleksander
Aleksander

💻
Add your contributions

This project follows the all-contributors specification. Contributions of any kind welcome!

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

pnpm all-contributors add <username> <contribution> Example: pnpm all-contributors add jfmengels code,doc