{"id":13497235,"url":"https://github.com/udayvunnam/xng-breadcrumb","last_synced_at":"2025-12-15T18:06:38.360Z","repository":{"id":34844307,"uuid":"183794550","full_name":"udayvunnam/xng-breadcrumb","owner":"udayvunnam","description":"A lightweight, configurable and reactive breadcrumbs for Angular 2+","archived":false,"fork":false,"pushed_at":"2025-02-08T07:13:11.000Z","size":4230,"stargazers_count":244,"open_issues_count":4,"forks_count":63,"subscribers_count":14,"default_branch":"main","last_synced_at":"2025-03-18T11:11:29.612Z","etag":null,"topics":["angular","angular-breadcrumb","angular6","breadcrumb-labels","breadcrumbs","ng-breadcrumbs","ngx"],"latest_commit_sha":null,"homepage":"https://udayvunnam.github.io/xng-breadcrumb","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/udayvunnam.png","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","threat_model":null,"audit":null,"citation":null,"codeowners":".github/CODEOWNERS","security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"github":"udayvunnam","custom":"https://www.paypal.me/udayvunnam","patreon":null,"open_collective":null,"ko_fi":null,"tidelift":null,"community_bridge":null,"liberapay":null,"issuehunt":null,"otechie":null}},"created_at":"2019-04-27T16:08:53.000Z","updated_at":"2025-03-09T08:36:01.000Z","dependencies_parsed_at":"2023-01-15T09:32:00.051Z","dependency_job_id":"4c918d6b-823e-4355-b800-6cc39111b510","html_url":"https://github.com/udayvunnam/xng-breadcrumb","commit_stats":{"total_commits":176,"total_committers":12,"mean_commits":"14.666666666666666","dds":"0.30113636363636365","last_synced_commit":"1393f0776463942e2c0e6faa94289d4fc3c23561"},"previous_names":[],"tags_count":77,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/udayvunnam%2Fxng-breadcrumb","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/udayvunnam%2Fxng-breadcrumb/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/udayvunnam%2Fxng-breadcrumb/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/udayvunnam%2Fxng-breadcrumb/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/udayvunnam","download_url":"https://codeload.github.com/udayvunnam/xng-breadcrumb/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246105408,"owners_count":20724307,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angular","angular-breadcrumb","angular6","breadcrumb-labels","breadcrumbs","ng-breadcrumbs","ngx"],"created_at":"2024-07-31T20:00:27.182Z","updated_at":"2025-12-15T18:06:38.351Z","avatar_url":"https://github.com/udayvunnam.png","language":"TypeScript","funding_links":["https://github.com/sponsors/udayvunnam","https://www.paypal.me/udayvunnam","http://paypal.me/udayvunnam"],"categories":["Uncategorized","Third Party Components"],"sub_categories":["Uncategorized","Router"],"readme":"\u003ch1 align=\"center\" style=\"color: teal\"\u003exng-breadcrumb\u003c/h1\u003e\n\n\u003cdiv align=\"center\"\u003e\n\n\u003e A lightweight, declarative, and dynamic breadcrumb solution for Angular 6+. [🌐 View on npm](https://www.npmjs.com/package/xng-breadcrumb)\n\n[![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)\n[![npm version](https://img.shields.io/npm/v/xng-breadcrumb.svg)](https://www.npmjs.com/package/xng-breadcrumb)\n[![license](https://badgen.net/github/license/micromatch/micromatch)](https://github.com/udayvunnam/xng-breadcrumb/blob/main/LICENSE)\n![All Contributors](https://badgen.net/github/contributors/udayvunnam/xng-breadcrumb)\n![npm downloads](https://img.shields.io/npm/dt/xng-breadcrumb?style=social)\n[![Twitter follow](https://img.shields.io/twitter/follow/udayvunnam_?style=social)](https://x.com/udayvunnam_)\n\n\u003c/div\u003e\n\n## What is xng-breadcrumb\n\n**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.\n\nWhether you're building a dashboard, a blog, or an enterprise-grade app, this library helps keep your navigation intuitive and dynamic.\n\n## 🔍 Why Breadcrumbs?\nBreadcrumbs provide users with:\n\n✅ Context — See where they are in your app's hierarchy\n\n✅ Navigation — Quickly move to parent or sibling routes\n\n✅ Clarity — Reduced cognitive load in deep nested UIs\n\n## 📖 Documentation\n\nGet started in minutes with our full [Documentation](https://udayvunnam.github.io/xng-breadcrumb), including usage, configuration, and examples.\n\n## 🧪 Live Demo\n\nExperience it firsthand in the [Demo App](https://xng-breadcrumb.vercel.app/)\n\n\u003ca href=\"https://xng-breadcrumb.vercel.app//dashboard\" rel=\"noopener\" target=\"_blank\" \u003e\u003cimg width=\"945\" alt=\"xng-breadcrumb usage\" src=\"https://github.com/udayvunnam/xng-breadcrumb/assets/20707504/02aa26d1-a41f-4a47-a1fe-009d6dfcd0b7\"\u003e\u003c/a\u003e\u003c/p\u003e\n\n## ✨ Features\n\n- ✅ **Zero Config Setup**: Just drop `\u003cxng-breadcrumb\u003e` anywhere in the app.\n\n- ✅ **Auto Labels** — Automatically generates labels from Angular route configs.\n\n- ✅ **Custom Labels** — Easily override route labels.\n\n- ✅ **Dynamic Updates**: Change breadcrumb labels dynamically using `BreadcrumbService.set()`, utilizing either _route path_ or _route alias_.\n\n- ✅ **Skip breadcrumb**: Conditionally exclude specific routes from breadcrumb display\n\n- ✅ **Disable breadcrumb**: Can disable specific routes in breadcrumbs to prevent navigation to intermediate states .\n\n- ✅ **Customization**: Customize breadcrumb template to display **icons with label**, **apply text formatting using pipes**, **integrate i18n with ngx-translate**, and more.\n\n- ✅ **Styling and Seperators**: Easily customize breadcrumb separators and styles to match your application's design\n\n- ✅ **QueryParams and Fragment**: Preserves params/fragments across navigation.\n\n- ✅ **SSR Ready**: Fully compatible with Angular Universal.\n\n## [💖 Support the Project](http://paypal.me/udayvunnam)\n\nIf xng-breadcrumb saves you hours or adds polish to your app, consider [becoming a sponsor](http://paypal.me/udayvunnam). Every contribution helps!\n\n## 👏 Contributors\n\nThanks to all the amazing folks who make this project better! ([💪](https://allcontributors.org/docs/en/emoji-key)):\n\n\u003c!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section --\u003e\n\u003c!-- prettier-ignore-start --\u003e\n\u003c!-- markdownlint-disable --\u003e\n\u003ctable\u003e\n  \u003ctbody\u003e\n    \u003ctr\u003e\n      \u003ctd align=\"center\" valign=\"top\" width=\"14.28%\"\u003e\u003ca href=\"https://www.linkedin.com/in/udayvunnam/\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/20707504?v=4?s=100\" width=\"100px;\" alt=\"Uday Vunnam\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eUday Vunnam\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/udayvunnam/xng-breadcrumb/commits?author=udayvunnam\" title=\"Code\"\u003e💻\u003c/a\u003e \u003ca href=\"https://github.com/udayvunnam/xng-breadcrumb/commits?author=udayvunnam\" title=\"Documentation\"\u003e📖\u003c/a\u003e \u003ca href=\"#maintenance-udayvunnam\" title=\"Maintenance\"\u003e🚧\u003c/a\u003e\u003c/td\u003e\n      \u003ctd align=\"center\" valign=\"top\" width=\"14.28%\"\u003e\u003ca href=\"https://github.com/anthonythiry\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/28025542?v=4?s=100\" width=\"100px;\" alt=\"anthonythiry\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eanthonythiry\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/udayvunnam/xng-breadcrumb/commits?author=anthonythiry\" title=\"Code\"\u003e💻\u003c/a\u003e\u003c/td\u003e\n      \u003ctd align=\"center\" valign=\"top\" width=\"14.28%\"\u003e\u003ca href=\"https://github.com/dedrazer\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/23525418?v=4?s=100\" width=\"100px;\" alt=\"dedrazer\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003ededrazer\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/udayvunnam/xng-breadcrumb/commits?author=dedrazer\" title=\"Code\"\u003e💻\u003c/a\u003e\u003c/td\u003e\n      \u003ctd align=\"center\" valign=\"top\" width=\"14.28%\"\u003e\u003ca href=\"https://dannyfeliz.com/\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/5460365?v=4?s=100\" width=\"100px;\" alt=\"Danny Feliz\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eDanny Feliz\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/udayvunnam/xng-breadcrumb/commits?author=DannyFeliz\" title=\"Documentation\"\u003e📖\u003c/a\u003e\u003c/td\u003e\n      \u003ctd align=\"center\" valign=\"top\" width=\"14.28%\"\u003e\u003ca href=\"https://github.com/kapenzo\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/16196222?v=4?s=100\" width=\"100px;\" alt=\"Kapsky\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eKapsky\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/udayvunnam/xng-breadcrumb/commits?author=kapenzo\" title=\"Code\"\u003e💻\u003c/a\u003e\u003c/td\u003e\n      \u003ctd align=\"center\" valign=\"top\" width=\"14.28%\"\u003e\u003ca href=\"https://github.com/andreicojea\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/4705022?v=4?s=100\" width=\"100px;\" alt=\"Andrei Cojea\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eAndrei Cojea\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/udayvunnam/xng-breadcrumb/commits?author=andreicojea\" title=\"Documentation\"\u003e📖\u003c/a\u003e\u003c/td\u003e\n      \u003ctd align=\"center\" valign=\"top\" width=\"14.28%\"\u003e\u003ca href=\"https://github.com/jontze\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/42588836?v=4?s=100\" width=\"100px;\" alt=\"Jonathan\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eJonathan\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/udayvunnam/xng-breadcrumb/commits?author=jontze\" title=\"Code\"\u003e💻\u003c/a\u003e\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd align=\"center\" valign=\"top\" width=\"14.28%\"\u003e\u003ca href=\"https://pavankjadda.dev/\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/17564080?v=4?s=100\" width=\"100px;\" alt=\"Pavan Kumar Jadda\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003ePavan Kumar Jadda\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/udayvunnam/xng-breadcrumb/commits?author=pavankjadda\" title=\"Code\"\u003e💻\u003c/a\u003e\u003c/td\u003e\n      \u003ctd align=\"center\" valign=\"top\" width=\"14.28%\"\u003e\u003ca href=\"https://github.com/LeonFretter\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/40633983?v=4?s=100\" width=\"100px;\" alt=\"Leon Fretter\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eLeon Fretter\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/udayvunnam/xng-breadcrumb/commits?author=LeonFretter\" title=\"Code\"\u003e💻\u003c/a\u003e\u003c/td\u003e\n      \u003ctd align=\"center\" valign=\"top\" width=\"14.28%\"\u003e\u003ca href=\"https://github.com/lukasmatta\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/4323927?v=4?s=100\" width=\"100px;\" alt=\"Lukáš Matta\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eLukáš Matta\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/udayvunnam/xng-breadcrumb/commits?author=lukasmatta\" title=\"Documentation\"\u003e📖\u003c/a\u003e\u003c/td\u003e\n      \u003ctd align=\"center\" valign=\"top\" width=\"14.28%\"\u003e\u003ca href=\"https://github.com/cskiwi\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/847540?v=4?s=100\" width=\"100px;\" alt=\"Glenn Latomme\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eGlenn Latomme\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/udayvunnam/xng-breadcrumb/commits?author=cskiwi\" title=\"Code\"\u003e💻\u003c/a\u003e\u003c/td\u003e\n      \u003ctd align=\"center\" valign=\"top\" width=\"14.28%\"\u003e\u003ca href=\"https://github.com/ovidiu-cssrl\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/48490266?v=4?s=100\" width=\"100px;\" alt=\"Ovidiu Haureș\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eOvidiu Haureș\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/udayvunnam/xng-breadcrumb/commits?author=ovidiu-cssrl\" title=\"Code\"\u003e💻\u003c/a\u003e\u003c/td\u003e\n      \u003ctd align=\"center\" valign=\"top\" width=\"14.28%\"\u003e\u003ca href=\"https://github.com/KristofGilis\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/2454275?v=4?s=100\" width=\"100px;\" alt=\"Kristof Gilis\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eKristof Gilis\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/udayvunnam/xng-breadcrumb/commits?author=KristofGilis\" title=\"Code\"\u003e💻\u003c/a\u003e\u003c/td\u003e\n      \u003ctd align=\"center\" valign=\"top\" width=\"14.28%\"\u003e\u003ca href=\"https://github.com/aliaksanderkazlou\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/11739292?v=4?s=100\" width=\"100px;\" alt=\"Aleksander\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eAleksander\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/udayvunnam/xng-breadcrumb/commits?author=aliaksanderkazlou\" title=\"Code\"\u003e💻\u003c/a\u003e\u003c/td\u003e\n    \u003c/tr\u003e\n  \u003c/tbody\u003e\n  \u003ctfoot\u003e\n    \u003ctr\u003e\n      \u003ctd align=\"center\" size=\"13px\" colspan=\"7\"\u003e\n        \u003cimg src=\"https://raw.githubusercontent.com/all-contributors/all-contributors-cli/1b8533af435da9854653492b1327a23a4dbd0a10/assets/logo-small.svg\"\u003e\n          \u003ca href=\"https://all-contributors.js.org/docs/en/bot/usage\"\u003eAdd your contributions\u003c/a\u003e\n        \u003c/img\u003e\n      \u003c/td\u003e\n    \u003c/tr\u003e\n  \u003c/tfoot\u003e\n\u003c/table\u003e\n\n\u003c!-- markdownlint-restore --\u003e\n\u003c!-- prettier-ignore-end --\u003e\n\n\u003c!-- ALL-CONTRIBUTORS-LIST:END --\u003e\n\nWant to see your name here? We welcome [all-contributions](https://github.com/all-contributors/all-contributors)!\n\nAdding a contributor is easy:\n\n```bash\npnpm all-contributors add \u003cusername\u003e \u003ccontribution\u003e\n# Example:\npnpm all-contributors add jfmengels code,doc\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fudayvunnam%2Fxng-breadcrumb","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fudayvunnam%2Fxng-breadcrumb","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fudayvunnam%2Fxng-breadcrumb/lists"}