feat(breadcrumb): Add IgxBreadcrumb component #16553
Draft
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode characters
…bility support Co-authored-by: zdrawku <11193764+zdrawku@users.noreply.github.com>
…edback Co-authored-by: zdrawku <11193764+zdrawku@users.noreply.github.com>
Copilot AI changed the title [WIP] Implement IgxBreadcrumb component for igniteui-angular feat(breadcrumb): Add IgxBreadcrumb component Nov 28, 2025
Contributor
| @copilot great, have you noticed there are sample apps project insite the repository where each component is presented as a sample integrated within some scenario or just by using other components. Can you do the same, add 3 sample apps of how the new breadcrumb component can be used, customized and styled |
…nd styling Co-authored-by: zdrawku <11193764+zdrawku@users.noreply.github.com>
Contributor Author
Added 7 sample apps demonstrating different breadcrumb usage scenarios in commit 3b09655:
Warning Firewall rules blocked me from connecting to one or more addresses (expand for details)I tried to connect to the following addresses, but was blocked by firewall rules:
If you need me to access, download, or install something from one of these locations, you can either:
|
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Add this suggestion to a batch that can be applied as a single commit. This suggestion is invalid because no changes were made to the code. Suggestions cannot be applied while the pull request is closed. Suggestions cannot be applied while viewing a subset of changes. Only one suggestion per line can be applied in a batch. Add this suggestion to a batch that can be applied as a single commit. Applying suggestions on deleted lines is not supported. You must change the existing code in this line in order to create a valid suggestion. Outdated suggestions cannot be applied. This suggestion has been applied or marked resolved. Suggestions cannot be applied from pending reviews. Suggestions cannot be applied on multi-line comments. Suggestions cannot be applied while the pull request is queued to merge. Suggestion cannot be applied right now. Please check back later.
Closes #6642
Implements
IgxBreadcrumbcomponent for navigation trail display with router integration and accessibility support.Components & API
separator,maxItems,itemsBeforeCollapse,itemsAfterCollapse,typeinputslink,routerLink,disabled,iconinputsUsage
Accessibility
role="navigation"witharia-label="breadcrumb"<ol>/<li>structurearia-current="page"on current itemSample Apps
The sample app at
/breadcrumbdemonstrates 7 different usage scenarios:/)Additional information (check all that apply):
Checklist:
feature/README.MDupdates for the feature docsREADME.MDCHANGELOG.MDupdates for newly added functionalityng updatemigrations for the breaking changes (migrations guidelines)Original prompt
Overview
Implement a new
IgxBreadcrumbcomponent for the igniteui-angular library as requested in issue #6642.Component Requirements
Main Component:
IgxBreadcrumbComponentigx-breadcrumbseparator: Custom separator between crumbs (default: chevron icon or>>)maxItems: Maximum number of visible items before overflow/collapsingitemsBeforeCollapse: Number of items visible before the collapsed sectionitemsAfterCollapse: Number of items visible after the collapsed sectiontype: Breadcrumb type -'location'|'attribute'|'dynamic'location: Used for navigation schemes with multiple levels of hierarchyattribute: Displays the full crumb items traildynamic: Path-based breadcrumbs showing the path taken to arrive at a pageChild Component:
IgxBreadcrumbItemComponentigx-breadcrumb-itemlink: Navigation URL (standard href)routerLink: Angular Router integrationdisabled: Boolean for non-clickable items (e.g., current location)icon: Optional icon name to displayTemplate Directives
IgxBreadcrumbSeparatorDirective: Custom separator templateIgxBreadcrumbItemTemplateDirective: Custom item templateRouter Integration
IgxBreadcrumbServicethat can:data: { breadcrumb: 'Label' }in route config)Overflow Behavior
maxItems, show ellipsis (...) for collapsed itemsitemsBeforeCollapseanditemsAfterCollapseto determine visible itemsAccessibility (a11y)
role="navigation"to the componentaria-label="breadcrumb"to the nav element<ol>with<li>elements for semantic structurearia-current="page"to the last/current itemTheming & Styling
_breadcrumb-theme.scsswith CSS variables (--igx-breadcrumb-*)IgSizeDirectiveFile Structure
Create the following structure under
projects/igniteui-angular/breadcrumb/:Public API Exports
IgxBreadcrumbComponentIgxBreadcrumbItemComponentIgxBreadcrumbSeparatorDirectiveIgxBreadcrumbItemTemplateDirectiveIgxBreadcrumbServiceIgxBreadcrumbModuleIGX_BREADCRUMB_DIRECTIVES(standalone imports array)BreadcrumbType,IBreadcrumbItemSample Usage
Manual Definition:
With Router Auto-generation:
With Custom Separator:
Testing Requirements
Documentation
Closes #6642
This pull request was created as a result of the following prompt from Copilot chat.
💬 We'd love your input! Share your thoughts on Copilot coding agent in our 2 minute survey.