Xng Breadcrumb

Overview

Navigating through applications can sometimes feel daunting, especially with intricate route structures. This is where xng-breadcrumb shines as a lightweight and dynamic breadcrumb component tailored specifically for Angular applications. Designed for versions 6 and above, xng-breadcrumb simplifies route navigation by automatically generating breadcrumbs based on your route configurations, allowing developers to focus on building their applications rather than managing breadcrumb strings manually.

Whether you're developing a quick dashboard, a comprehensive blog, or a full-fledged enterprise application, xng-breadcrumb enhances user experience by providing clarity and context. This tool not only helps users understand their current position within the app's hierarchy but also streamlines navigation, making transitions between parent and sibling routes seamless.

Features

• Zero Config Setup: Simply drop the <xng-breadcrumb> tag anywhere in your app for immediate functionality.
• Auto Labels: Automatically generates breadcrumb labels derived from your Angular route configurations.
• Custom Labels: Easily override default route labels to fit your specific needs.
• Dynamic Updates: Utilize BreadcrumbService.set() to dynamically change breadcrumb labels based on route paths or aliases.
• Skip Breadcrumb: Conditionally prevent certain routes from displaying in the breadcrumb path, keeping it clean and relevant.
• Disable Breadcrumb: Option to disable specific routes from appearing in breadcrumbs, which is useful for intermediate states.
• Customization: Tailor the breadcrumb template to work with icons, text formatting, and internationalization with ngx-translate.
• QueryParams and Fragment: Maintain query parameters and fragments across navigational changes, ensuring a smooth user experience.
• SSR Ready: Fully compatible with Angular Universal, making server-side rendering a breeze.