A lightweight, declarative, and dynamic breadcrumb component for Angular applications.
xng-breadcrumb is a lightweight, configurable breadcrumb component library for Angular 2+ applications. It automatically generates navigation breadcrumbs from Angular route configurations, solving the problem of manually stitching together breadcrumb trails and providing users with clear context and navigation in complex, nested UIs.
Angular developers building applications with deep navigation hierarchies, such as dashboards, enterprise apps, or content management systems, who need a dynamic and maintainable breadcrumb solution.
Developers choose xng-breadcrumb for its zero-config setup, seamless integration with Angular routing, and rich customization options, which save development time and provide a polished, user-friendly navigation experience out of the box.
A lightweight, configurable and reactive breadcrumbs for Angular 2+
Open-Awesome is built by the community, for the community. Submit a project, suggest an awesome list, or help improve the catalog on GitHub.
Just drop the <xng-breadcrumb> component anywhere in the app for immediate use, as emphasized in the 'Zero Config Setup' feature, saving initial development time.
Automatically generates breadcrumbs from Angular route configurations, eliminating manual stitching and leveraging Angular's built-in routing system for dynamic updates.
Allows on-the-fly label changes using BreadcrumbService.set(), supporting both route paths and aliases, enabling reactive navigation experiences.
Supports custom templates with icons, text formatting via pipes, i18n integration with ngx-translate, and style overrides, as detailed in the documentation.
Fully compatible with Angular Universal for server-side rendering, ensuring breadcrumbs work correctly in SEO-sensitive applications.
Built specifically for Angular, it cannot be used with other frameworks, limiting flexibility for teams considering framework migrations or heterogeneous tech stacks.
Requires custom CSS for styling and separators, as it focuses on functionality over pre-designed aesthetics, which may increase initial setup effort for design-heavy projects.
Heavily reliant on Angular's router and services, so updates or changes in Angular core could introduce compatibility issues or require maintenance.