Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

feat(breadcrumb): Add IgxBreadcrumb component#16553

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to ourterms of service andprivacy statement. We’ll occasionally send you account related emails.

Already on GitHub?Sign in to your account

Draft
Copilot wants to merge4 commits intomaster
base:master
Choose a base branch
Loading
fromcopilot/add-igx-breadcrumb-component

Conversation

Copy link
Contributor

CopilotAI commentedNov 28, 2025•
edited
Loading

Closes#6642

ImplementsIgxBreadcrumb component for navigation trail display with router integration and accessibility support.

Components & API

  • IgxBreadcrumbComponent - Main container withseparator,maxItems,itemsBeforeCollapse,itemsAfterCollapse,type inputs
  • IgxBreadcrumbItemComponent - Individual items withlink,routerLink,disabled,icon inputs
  • IgxBreadcrumbSeparatorDirective - Custom separator template
  • IgxBreadcrumbItemTemplateDirective - Custom item template
  • IgxBreadcrumbService - Auto-generates breadcrumbs from Angular Router config

Usage

<igx-breadcrumb[maxItems]="4"[itemsBeforeCollapse]="1"[itemsAfterCollapse]="2"><igx-breadcrumb-item[routerLink]="['/home']"icon="home">Home</igx-breadcrumb-item><igx-breadcrumb-item[routerLink]="['/products']">Products</igx-breadcrumb-item><igx-breadcrumb-item[disabled]="true">Current Page</igx-breadcrumb-item></igx-breadcrumb>

Accessibility

  • role="navigation" witharia-label="breadcrumb"
  • Semantic<ol>/<li> structure
  • aria-current="page" on current item
  • Keyboard navigation via Tab/Shift+Tab

Sample Apps

The sample app at/breadcrumb demonstrates 7 different usage scenarios:

  1. Basic Breadcrumb - Simple navigation with icons and disabled current page
  2. Custom Separator - Using a custom separator character (/)
  3. Icon Separator Template - Custom icon as separator using ng-template
  4. Collapsed Items (Overflow) - Long breadcrumb trail with collapsed middle items
  5. Standard Links (href) - Using standard href links instead of router links
  6. Dynamic Breadcrumb - Data-driven breadcrumb items from an array
  7. Custom Styled Breadcrumb - Custom CSS styling with gradient background

Breadcrumb Samples

Additional information (check all that apply):

  • Bug fix
  • New functionality
  • Documentation
  • Demos
  • CI/CD

Checklist:

  • All relevant tags have been applied to this PR
  • This PR includes unit tests covering all the new code (test guidelines)
  • This PR includes API docs for newly added methods/properties (api docs guidelines)
  • This PR includesfeature/README.MD updates for the feature docs
  • This PR includes general feature table updates in the rootREADME.MD
  • This PR includesCHANGELOG.MD updates for newly added functionality
  • This PR contains breaking changes
  • This PR includesng update migrations for the breaking changes (migrations guidelines)
  • This PR includes behavioral changes and the feature specification has been updated with them
Original prompt

Overview

Implement a newIgxBreadcrumb component for the igniteui-angular library as requested in issue#6642.

Component Requirements

Main Component:IgxBreadcrumbComponent

  • Selector:igx-breadcrumb
  • Input properties:
    • separator: Custom separator between crumbs (default: chevron icon or>>)
    • maxItems: Maximum number of visible items before overflow/collapsing
    • itemsBeforeCollapse: Number of items visible before the collapsed section
    • itemsAfterCollapse: Number of items visible after the collapsed section
    • type: Breadcrumb type -'location' |'attribute' |'dynamic'
      • location: Used for navigation schemes with multiple levels of hierarchy
      • attribute: Displays the full crumb items trail
      • dynamic: Path-based breadcrumbs showing the path taken to arrive at a page

Child Component:IgxBreadcrumbItemComponent

  • Selector:igx-breadcrumb-item
  • Input properties:
    • link: Navigation URL (standard href)
    • routerLink: Angular Router integration
    • disabled: Boolean for non-clickable items (e.g., current location)
    • icon: Optional icon name to display

Template Directives

  • IgxBreadcrumbSeparatorDirective: Custom separator template
  • IgxBreadcrumbItemTemplateDirective: Custom item template

Router Integration

  • Support auto-generation of breadcrumbs from Angular Router configuration
  • Create a serviceIgxBreadcrumbService that can:
    • Listen to router events
    • Build breadcrumb trail from route data (usingdata: { breadcrumb: 'Label' } in route config)
    • Allow manual override/addition of breadcrumb items

Overflow Behavior

  • When items exceedmaxItems, show ellipsis (...) for collapsed items
  • Show tooltip on hover over ellipsis displaying the collapsed items
  • UseitemsBeforeCollapse anditemsAfterCollapse to determine visible items

Accessibility (a11y)

  • Addrole="navigation" to the component
  • Addaria-label="breadcrumb" to the nav element
  • Use<ol> with<li> elements for semantic structure
  • Addaria-current="page" to the last/current item
  • Implement keyboard navigation:
    • Tab/Shift+Tab to navigate between breadcrumb links
    • Enter/Space to activate links

Theming & Styling

  • Create SCSS theme files following the library pattern:
    • _breadcrumb-theme.scss with CSS variables (--igx-breadcrumb-*)
    • Support for display density variants (comfortable, cosy, compact) viaIgSizeDirective
  • Default styling should include:
    • Horizontal layout with flexbox
    • Proper spacing between items and separators
    • Hover states for interactive items
    • Disabled state styling

File Structure

Create the following structure underprojects/igniteui-angular/breadcrumb/:

breadcrumb/├── src/│   ├── breadcrumb/│   │   ├── breadcrumb.component.ts│   │   ├── breadcrumb.component.html│   │   ├── breadcrumb.component.scss│   │   ├── breadcrumb.component.spec.ts│   │   ├── breadcrumb-item.component.ts│   │   ├── breadcrumb-item.component.html│   │   ├── breadcrumb-item.component.scss│   │   ├── breadcrumb.directives.ts│   │   ├── breadcrumb.service.ts│   │   ├── breadcrumb.module.ts│   │   └── public_api.ts│   └── public_api.ts├── ng-package.json└── README.md

Public API Exports

  • IgxBreadcrumbComponent
  • IgxBreadcrumbItemComponent
  • IgxBreadcrumbSeparatorDirective
  • IgxBreadcrumbItemTemplateDirective
  • IgxBreadcrumbService
  • IgxBreadcrumbModule
  • IGX_BREADCRUMB_DIRECTIVES (standalone imports array)
  • Type definitions:BreadcrumbType,IBreadcrumbItem

Sample Usage

Manual Definition:

<igx-breadcrumb><igx-breadcrumb-item[routerLink]="['/home']"icon="home">Home</igx-breadcrumb-item><igx-breadcrumb-item[routerLink]="['/products']">Products</igx-breadcrumb-item><igx-breadcrumb-item[routerLink]="['/products', 'electronics']">Electronics</igx-breadcrumb-item><igx-breadcrumb-item[disabled]="true">Laptops</igx-breadcrumb-item></igx-breadcrumb>

With Router Auto-generation:

<igx-breadcrumb[type]="'dynamic'"></igx-breadcrumb>

With Custom Separator:

<igx-breadcrumb><ng-templateigxBreadcrumbSeparator><igx-icon>arrow_forward</igx-icon></ng-template><!-- items --></igx-breadcrumb>

Testing Requirements

  • Unit tests for component inputs/outputs
  • Tests for overflow behavior
  • Tests for router integration
  • Tests for keyboard navigation
  • Tests for accessibility attributes

Documentation

  • Add README.md with usage examples
  • Include JSDoc comments on all public APIs

Closes#6642

This pull request was created as a result of the following prompt from Copilot chat.

Overview

Implement a newIgxBreadcrumb component for the igniteui-angular library as requested in issue#6642.

Component Requirements

Main Component:IgxBreadcrumbComponent

  • Selector:igx-breadcrumb
  • Input properties:
    • separator: Custom separator between crumbs (default: chevron icon or>>)
    • maxItems: Maximum number of visible items before overflow/collapsing
    • itemsBeforeCollapse: Number of items visible before the collapsed section
    • itemsAfterCollapse: Number of items visible after the collapsed section
    • type: Breadcrumb type -'location' |'attribute' |'dynamic'
      • location: Used for navigation schemes with multiple levels of hierarchy
      • attribute: Displays the full crumb items trail
      • dynamic: Path-based breadcrumbs showing the path taken to arrive at a page

Child Component:IgxBreadcrumbItemComponent

  • Selector:igx-breadcrumb-item
  • Input properties:
    • link: Navigation URL (standard href)
    • routerLink: Angular Router integration
    • disabled: Boolean for non-clickable items (e.g., current location)
    • icon: Optional icon name to display

Template Directives

  • IgxBreadcrumbSeparatorDirective: Custom separator template
  • IgxBreadcrumbItemTemplateDirective: Custom item template

Router Integration

  • Support auto-generation of breadcrumbs from Angular Router configuration
  • Create a serviceIgxBreadcrumbService that can:
    • Listen to router events
    • Build breadcrumb trail from route data (usingdata: { breadcrumb: 'Label' } in route config)
    • Allow manual override/addition of breadcrumb items

Overflow Behavior

  • When items exceedmaxItems, show ellipsis (...) for collapsed items
  • Show tooltip on hover over ellipsis displaying the collapsed items
  • UseitemsBeforeCollapse anditemsAfterCollapse to determine visible items

Accessibility (a11y)

  • Addrole="navigation" to the component
  • Addaria-label="breadcrumb" to the nav element
  • Use<ol> with<li> elements for semantic structure
  • Addaria-current="page" to the last/current item
  • Implement keyboard navigation:
    • Tab/Shift+Tab to navigate between breadcrumb links
    • Enter/Space to activate links

Theming & Styling

  • Create SCSS theme files following the library pattern:
    • _breadcrumb-theme.scss with CSS variables (--igx-breadcrumb-*)
    • Support for display density variants (comfortable, cosy, compact) viaIgSizeDirective
  • Default styling should include:
    • Horizontal layout with flexbox
    • Proper spacing between items and separators
    • Hover states for interactive items
    • Disabled state styling

File Structure

Create the following structure underprojects/igniteui-angular/breadcrumb/:

breadcrumb/├── src/│   ├── breadcrumb/│   │   ├── breadcrumb.component.ts│   │   ├── breadcrumb.component.html│   │   ├── breadcrumb.component.scss│   │   ├── breadcrumb.component.spec.ts│   │   ├── breadcrumb-item.component.ts│   │   ├── breadcrumb-item.component.html│   │   ├── breadcrumb-item.component.scss│   │   ├── breadcrumb.directives.ts│   │   ├── breadcrumb.service.ts│   │   ├── breadcrumb.module.ts│   │   └── public_api.ts│   └── public_api.ts├── ng-package.json└── README.md

Public API Exports

  • IgxBreadcrumbComponent
  • IgxBreadcrumbItemComponent
  • IgxBreadcrumbSeparatorDirective
  • IgxBreadcrumbItemTemplateDirective
  • IgxBreadcrumbService
  • IgxBreadcrumbModule
  • IGX_BREADCRUMB_DIRECTIVES (standalone imports array)
  • Type definitions:BreadcrumbType,IBreadcrumbItem

Sample Usage

Manual Definition:

<igx-breadcrumb><igx-breadcrumb-item[routerLink]="['/home']"icon="home">Home</igx-breadcrumb-item><igx-breadcrumb-item[routerLink]="['/products']">Products</igx-breadcrumb-item><igx-breadcrumb-item[routerLink]="['/products', 'electronics']">Electronics</igx-breadcrumb-item><igx-breadcrumb-item[disabled]="true">Laptops</igx-breadcrumb-item></igx-breadcrumb>

With Router Auto-generation:

<igx-breadcrumb[type]="'dynamic'"></igx-breadcrumb>

With Custom Separator:

<igx-breadcrumb><ng-templateigxBreadcrumbSeparator><igx-icon>arrow_forward</igx-icon></ng-template><!-- items --></igx-breadcrumb>

Testing Requirements

  • Unit tests for component inputs/outputs
  • Tests for overflow behavior
  • Tests for router integration
  • Tests for keyboard navigation
  • Tests for accessibility attributes

Documentation

  • Add README.md with usage examples
  • Include JSDoc comments on all public APIs

Closes#6642

💬 We'd love your input! Share your thoughts on Copilot coding agent in our2 minute survey.

CopilotAIand others added2 commitsNovember 28, 2025 13:14
…bility supportCo-authored-by: zdrawku <11193764+zdrawku@users.noreply.github.com>
…edbackCo-authored-by: zdrawku <11193764+zdrawku@users.noreply.github.com>
CopilotAI changed the title[WIP] Implement IgxBreadcrumb component for igniteui-angularfeat(breadcrumb): Add IgxBreadcrumb componentNov 28, 2025
CopilotAI requested a review fromzdrawkuNovember 28, 2025 13:23
@zdrawku
Copy link
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 stylingCo-authored-by: zdrawku <11193764+zdrawku@users.noreply.github.com>
Copy link
ContributorAuthor

CopilotAI commentedNov 30, 2025•
edited
Loading

@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. Ca...

Added 7 sample apps demonstrating different breadcrumb usage scenarios in commit3b09655:

  1. Basic Breadcrumb with icons
  2. Custom separator character
  3. Icon separator template
  4. Collapsed items (overflow)
  5. Standard href links
  6. Dynamic/data-driven items
  7. Custom styled with gradient

Breadcrumb Samples

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:

  • accounts.google.com
    • Triggering command:/proc/self/exe /proc/self/exe --type=utility --utility-sub-type=network.mojom.NetworkService --lang=en-US --service-sandbox-type=network --no-sandbox --disable-dev-shm-usage --use-angle=swiftshader-webgl --crashpad-handler-pid=3851 --enable-crash-reporter=, --noerrdialogs --user-data-dir=/tmp/karma-14707425 --change-stack-guard-on-fork=enable --shared-files=network_parent_dirs_pipe:100,v8_context_snapshot_data:101 --field-trial-handle=3,i,5495479325810782740,17336877022565307908,262144 --disable-features=PaintHolding --variations-seed-version --trace-process-track-uuid=3190708989122997041 (dns block)
    • Triggering command:/home/REDACTED/.cache/puppeteer/chrome/linux-142.0.7444.175/chrome-linux64/chrome /home/REDACTED/.cache/puppeteer/chrome/linux-142.0.7444.175/chrome-linux64/chrome --user-data-dir=/tmp/karma-14707425 --enable-automation --no-default-browser-check --no-first-run --disable-default-apps --disable-popup-blocking --disable-translate --disable-REDACTED-timer-throttling --disable-renderer-REDACTEDing --disable-device-discovery-notifications --no-sandbox --disable-gpu --window-size=820,800 --js-flags=--expose-gc http://localhost:9876/?id=14707425 --headless --disable-gpu --disable-dev-shm-usage --remote-debugging-port=9222 (dns block)
    • Triggering command:/proc/self/exe /proc/self/exe --type=utility --utility-sub-type=network.mojom.NetworkService --lang=en-US --service-sandbox-type=network --no-sandbox --disable-dev-shm-usage --use-angle=swiftshader-webgl --crashpad-handler-pid=3853 --enable-crash-reporter=, --noerrdialogs --user-data-dir=/tmp/karma-69871691 --change-stack-guard-on-fork=enable --shared-files=network_parent_dirs_pipe:100,v8_context_snapshot_data:101 --field-trial-handle=3,i,4068623599478825045,12220001163022982738,262144 --disable-features=PaintHolding --variations-seed-version --trace-process-track-uuid=3190708989122997041 (dns block)
  • clients2.google.com
    • Triggering command:/proc/self/exe /proc/self/exe --type=utility --utility-sub-type=network.mojom.NetworkService --lang=en-US --service-sandbox-type=network --no-sandbox --disable-dev-shm-usage --use-angle=swiftshader-webgl --crashpad-handler-pid=3851 --enable-crash-reporter=, --noerrdialogs --user-data-dir=/tmp/karma-14707425 --change-stack-guard-on-fork=enable --shared-files=network_parent_dirs_pipe:100,v8_context_snapshot_data:101 --field-trial-handle=3,i,5495479325810782740,17336877022565307908,262144 --disable-features=PaintHolding --variations-seed-version --trace-process-track-uuid=3190708989122997041 (dns block)
    • Triggering command:/proc/self/exe /proc/self/exe --type=utility --utility-sub-type=network.mojom.NetworkService --lang=en-US --service-sandbox-type=network --no-sandbox --disable-dev-shm-usage --use-angle=swiftshader-webgl --crashpad-handler-pid=3853 --enable-crash-reporter=, --noerrdialogs --user-data-dir=/tmp/karma-69871691 --change-stack-guard-on-fork=enable --shared-files=network_parent_dirs_pipe:100,v8_context_snapshot_data:101 --field-trial-handle=3,i,4068623599478825045,12220001163022982738,262144 --disable-features=PaintHolding --variations-seed-version --trace-process-track-uuid=3190708989122997041 (dns block)
    • Triggering command:/proc/self/exe /proc/self/exe --type=utility --utility-sub-type=network.mojom.NetworkService --lang=en-US --service-sandbox-type=network --no-sandbox --disable-dev-shm-usage --use-angle=swiftshader-webgl --crashpad-handler-pid=3852 --enable-crash-reporter=, --noerrdialogs --user-data-dir=/tmp/karma-35531358 --change-stack-guard-on-fork=enable --shared-files=network_parent_dirs_pipe:100,v8_context_snapshot_data:101 --field-trial-handle=3,i,6038478212496026864,1303489064829668366,262144 --disable-features=PaintHolding --variations-seed-version --trace-process-track-uuid=3190708989122997041 (dns block)
  • redirector.gvt1.com
    • Triggering command:/proc/self/exe /proc/self/exe --type=utility --utility-sub-type=network.mojom.NetworkService --lang=en-US --service-sandbox-type=network --no-sandbox --disable-dev-shm-usage --use-angle=swiftshader-webgl --crashpad-handler-pid=3851 --enable-crash-reporter=, --noerrdialogs --user-data-dir=/tmp/karma-14707425 --change-stack-guard-on-fork=enable --shared-files=network_parent_dirs_pipe:100,v8_context_snapshot_data:101 --field-trial-handle=3,i,5495479325810782740,17336877022565307908,262144 --disable-features=PaintHolding --variations-seed-version --trace-process-track-uuid=3190708989122997041 (dns block)
    • Triggering command:/home/REDACTED/.cache/puppeteer/chrome/linux-142.0.7444.175/chrome-linux64/chrome /home/REDACTED/.cache/puppeteer/chrome/linux-142.0.7444.175/chrome-linux64/chrome --user-data-dir=/tmp/karma-14707425 --enable-automation --no-default-browser-check --no-first-run --disable-default-apps --disable-popup-blocking --disable-translate --disable-REDACTED-timer-throttling --disable-renderer-REDACTEDing --disable-device-discovery-notifications --no-sandbox --disable-gpu --window-size=820,800 --js-flags=--expose-gc http://localhost:9876/?id=14707425 --headless --disable-gpu --disable-dev-shm-usage --remote-debugging-port=9222 (dns block)
    • Triggering command:/proc/self/exe /proc/self/exe --type=utility --utility-sub-type=network.mojom.NetworkService --lang=en-US --service-sandbox-type=network --no-sandbox --disable-dev-shm-usage --use-angle=swiftshader-webgl --crashpad-handler-pid=3853 --enable-crash-reporter=, --noerrdialogs --user-data-dir=/tmp/karma-69871691 --change-stack-guard-on-fork=enable --shared-files=network_parent_dirs_pipe:100,v8_context_snapshot_data:101 --field-trial-handle=3,i,4068623599478825045,12220001163022982738,262144 --disable-features=PaintHolding --variations-seed-version --trace-process-track-uuid=3190708989122997041 (dns block)
  • www.google.com
    • Triggering command:/proc/self/exe /proc/self/exe --type=utility --utility-sub-type=network.mojom.NetworkService --lang=en-US --service-sandbox-type=network --no-sandbox --disable-dev-shm-usage --use-angle=swiftshader-webgl --crashpad-handler-pid=3851 --enable-crash-reporter=, --noerrdialogs --user-data-dir=/tmp/karma-14707425 --change-stack-guard-on-fork=enable --shared-files=network_parent_dirs_pipe:100,v8_context_snapshot_data:101 --field-trial-handle=3,i,5495479325810782740,17336877022565307908,262144 --disable-features=PaintHolding --variations-seed-version --trace-process-track-uuid=3190708989122997041 (dns block)
    • Triggering command:/home/REDACTED/.cache/puppeteer/chrome/linux-142.0.7444.175/chrome-linux64/chrome /home/REDACTED/.cache/puppeteer/chrome/linux-142.0.7444.175/chrome-linux64/chrome --user-data-dir=/tmp/karma-14707425 --enable-automation --no-default-browser-check --no-first-run --disable-default-apps --disable-popup-blocking --disable-translate --disable-REDACTED-timer-throttling --disable-renderer-REDACTEDing --disable-device-discovery-notifications --no-sandbox --disable-gpu --window-size=820,800 --js-flags=--expose-gc http://localhost:9876/?id=14707425 --headless --disable-gpu --disable-dev-shm-usage --remote-debugging-port=9222 (dns block)
    • Triggering command:/proc/self/exe /proc/self/exe --type=utility --utility-sub-type=network.mojom.NetworkService --lang=en-US --service-sandbox-type=network --no-sandbox --disable-dev-shm-usage --use-angle=swiftshader-webgl --crashpad-handler-pid=3853 --enable-crash-reporter=, --noerrdialogs --user-data-dir=/tmp/karma-69871691 --change-stack-guard-on-fork=enable --shared-files=network_parent_dirs_pipe:100,v8_context_snapshot_data:101 --field-trial-handle=3,i,4068623599478825045,12220001163022982738,262144 --disable-features=PaintHolding --variations-seed-version --trace-process-track-uuid=3190708989122997041 (dns block)

If you need me to access, download, or install something from one of these locations, you can either:

Sign up for freeto join this conversation on GitHub. Already have an account?Sign in to comment

Reviewers

@zdrawkuzdrawkuAwaiting requested review from zdrawku

At least 1 approving review is required to merge this pull request.

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

Breadcrumb component

2 participants

@zdrawku
[8]ページ先頭
©2009-2025 Movatter.jp