Merge pull request #2665 from Teradata/fix/DSYS-502

feat(breadcrumbs): new breadcrumbs behavior on responsive screens

Author: omaardev

apps/docs-app/src/app/content/components/component-demos/markdown-navigator/demos/markdown-navigator-demo-basic/markdown-navigator-demo-basic.component.ts

@@ -43,9 +43,24 @@ export class MarkdownNavigatorDemoBasicComponent {
       icon: 'code_fork_outlined;covalent',
       children: [
         {
-          title: 'Sub item',
+          title: 'Covalent Sub item Folder 1',
           icon: 'folder',
           markdownString: '# Sub Item\n\nA nested example.',
+          children: [
+            {
+              title: 'Covalent Sub item Folder 2',
+              icon: 'folder',
+              markdownString: '# Sub Item\n\nA nested example.',
+              children: [
+                {
+                  title: 'Covalent Sub item 3',
+                  icon: 'folder',
+                  markdownString: '# Sub Item\n\nA nested example.',
+                  children: [],
+                },
+              ],
+            },
+          ],
         },
       ],
     },

apps/docs-app/src/styles.scss

@@ -1,5 +1,6 @@
 @use '@angular/material' as mat;
 @use '@covalent/tokens' as variables;
+@import '@covalent/tokens/index.css';
 @import '../../../libs/angular/theming/all-theme';
 @import '../../../libs/markdown/markdown-theme';
 @import '../../../libs/angular-highlight/highlight-theme';

libs/angular/breadcrumbs/README.md

@@ -1,13 +1,16 @@
 # td-breadcrumbs
 
-`td-breadcrumbs` element generates breadcrumbs for navigation. Handles Responsive by removing breadcrumbs from the beginning of the list as allowable space decreases.
+`td-breadcrumbs` element generates breadcrumbs for navigation. Handles responsive layouts intelligently by always showing the first and last breadcrumb, while middle items are hidden in an overflow menu (···) when space is limited. The last breadcrumb is truncated with ellipsis if too long.
 
 ## API Summary
 
 #### Inputs
 
 - separatorIcon?: string
   - Sets the icon url shown between breadcrumbs. Defaults to 'chevron_right'.
+- size?: string
+  - Sets the typography size. Options: 'headline1', 'headline2', 'headline3', 'headline4', 'headline5', 'headline6', 'subtitle1', 'subtitle2', 'body1', 'body2', 'button', 'caption'
+  - **Note:** Requires `@covalent/tokens/index.css` to be imported in your global styles
 
 #### Methods
 
@@ -17,7 +20,9 @@
 #### Attributes
 
 - hiddenBreadcrumbs: TdBreadcrumbComponent[]
-  - Array of currently hidden breadcrumbs (responsive)
+  - Array of currently hidden breadcrumbs shown in the overflow menu (responsive)
+- showOverflowButton: boolean
+  - Whether the overflow menu button (···) is currently displayed
 
 # td-breadcrumb
 
@@ -34,6 +39,23 @@
 
 ## Setup
 
+### Standalone Components (Recommended)
+
+Import the standalone components directly:
+
+```typescript
+import { TdBreadcrumbsComponent, TdBreadcrumbComponent } from '@covalent/core/breadcrumbs';
+
+@Component({
+  standalone: true,
+  imports: [TdBreadcrumbsComponent, TdBreadcrumbComponent, ...],
+  ...
+})
+export class MyComponent {}
+```
+
+### NgModule (Legacy)
+
 Import the [CovalentBreadcrumbsModule] in your NgModule:
 
 ```typescript
@@ -62,10 +84,21 @@ Basic Example:
 </td-breadcrumbs>
 ```
 
+Example with typography size:
+
+```html
+<td-breadcrumbs size="caption">
+  <a td-breadcrumb [routerLink]="'/'">Home</a>
+  <a td-breadcrumb [routerLink]="'/projects'">Projects</a>
+  <a td-breadcrumb [routerLink]="'/project/123'">Project Details</a>
+  <td-breadcrumb>Settings</td-breadcrumb>
+</td-breadcrumbs>
+```
+
 Example with all inputs/outputs:
 
 ```html
-<td-breadcrumbs #breadcrumbs separatorIcon="motorcycle">
+<td-breadcrumbs #breadcrumbs separatorIcon="motorcycle" size="body2">
   <a td-breadcrumb [routerLink]="'/'">Home</a>
   <a td-breadcrumb [routerLink]="'/layouts'">Layouts</a>
   <a td-breadcrumb [routerLink]="'/layouts2'">Layouts2</a>
@@ -74,20 +107,23 @@ Example with all inputs/outputs:
 </td-breadcrumbs>
 <mat-divider></mat-divider>
 <div>Total Breadcrumbs Count: {{breadcrumbs.count}}</div>
-<div>
-  Hidden Breadcrumbs Count (shrink window to see):
-  {{breadcrumbs.hiddenBreadcrumbs.length}}
-</div>
-<ng-template
-  let-breadcrumb
-  let-index="index"
-  ngFor
-  [ngForOf]="breadcrumbs.hiddenBreadcrumbs"
->
+<div>Hidden Breadcrumbs Count (shrink window to see overflow menu): {{breadcrumbs.hiddenBreadcrumbs.length}}</div>
+<div *ngIf="breadcrumbs.showOverflowButton">Overflow menu (···) is visible with {{breadcrumbs.hiddenBreadcrumbs.length}} hidden items</div>
+<ng-template let-breadcrumb let-index="index" ngFor [ngForOf]="breadcrumbs.hiddenBreadcrumbs">
   <div>
-    <p>Breadcrumb Number: {{index}}</p>
-    <p>Breadcrumb Width: {{breadcrumb?.width}}</p>
+    <p>Hidden Breadcrumb {{index}}: {{breadcrumb?.fullText}}</p>
+    <p>Original Width: {{breadcrumb?.width}}px</p>
     <mat-divider></mat-divider>
   </div>
 </ng-template>
 ```
+
+## Responsive Behavior
+
+The breadcrumbs component automatically handles responsive layouts:
+
+- **First breadcrumb**: Always visible (typically "Home" or root)
+- **Last breadcrumb**: Always visible (current page), truncated with ellipsis if too long
+- **Middle breadcrumbs**: Hidden in overflow menu (···) when space is limited
+- **Overflow menu**: Clickable button that shows all hidden breadcrumbs
+- **Tooltips**: Displayed on truncated breadcrumbs showing the full text

libs/angular/breadcrumbs/src/breadcrumb/breadcrumb.component.html

@@ -1,8 +1,18 @@
-<ng-content></ng-content>
-<mat-icon
-  *ngIf="displayIcon"
-  class="td-breadcrumb-separator-icon"
-  [style.cursor]="'default'"
-  (click)="_handleIconClick($event)"
-  >{{ separatorIcon }}</mat-icon
+<span
+  class="td-breadcrumb-text"
+  [class.td-breadcrumb-truncated]="shouldTruncate"
+  [matTooltip]="shouldTruncate ? fullText : ''"
+  [matTooltipDisabled]="!shouldTruncate"
+  [attr.aria-label]="shouldTruncate ? fullText : null"
 >
+  <ng-content></ng-content>
+</span>
+@if (displayIcon) {
+  <mat-icon
+    class="td-breadcrumb-separator-icon"
+    [style.cursor]="'default'"
+    (click)="_handleIconClick($event)"
+    aria-hidden="true"
+    >{{ separatorIcon }}</mat-icon
+  >
+}

libs/angular/breadcrumbs/src/breadcrumb/breadcrumb.component.scss

@@ -7,6 +7,7 @@
     align-content: center;
     flex-shrink: 0;
     justify-content: flex-end;
+    max-width: 100%;
 
     ::ng-deep > * {
       margin: 0 10px;
@@ -24,3 +25,22 @@
     padding: 0;
   }
 }
+
+.td-breadcrumb-text {
+  margin: 0;
+  padding: 0;
+  flex: 1 1 auto;
+  min-width: 0;
+
+  &.td-breadcrumb-truncated {
+    display: block;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    max-width: 100%;
+  }
+}
+
+mat-icon.td-breadcrumb-separator-icon {
+  flex-shrink: 0;
+}

libs/angular/breadcrumbs/src/breadcrumb/breadcrumb.component.ts

@@ -9,22 +9,34 @@ import {
   inject,
 } from '@angular/core';
 import { MatIcon } from '@angular/material/icon';
+import { MatTooltipModule } from '@angular/material/tooltip';
 
 @Component({
   selector: 'td-breadcrumb, a[td-breadcrumb]',
   styleUrls: ['./breadcrumb.component.scss'],
   templateUrl: './breadcrumb.component.html',
-  imports: [CommonModule, MatIcon],
+  imports: [CommonModule, MatIcon, MatTooltipModule],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class TdBreadcrumbComponent implements AfterViewInit {
-  private _elementRef = inject(ElementRef);
   private _changeDetectorRef = inject(ChangeDetectorRef);
 
   private _displayCrumb = true;
   private _width = 0;
   private _displayIcon = true;
   private _separatorIcon = 'chevron_right';
+  private _shouldTruncate = false;
+  private _maxWidth?: number;
+
+  public elementRef = inject(ElementRef);
+  public fullText = '';
+  public flexOrder = 0;
+  public isCurrentPage = false;
+
+  @HostBinding('attr.aria-current')
+  get ariaCurrent(): string | null {
+    return this.isCurrentPage ? 'page' : null;
+  }
 
   @HostBinding('class.mdc-button') matButtonClass = true;
   @HostBinding('class.td-breadcrumb') tdBreadCrumbClass = true;
@@ -51,14 +63,36 @@ export class TdBreadcrumbComponent implements AfterViewInit {
     });
   }
 
+  get shouldTruncate(): boolean {
+    return this._shouldTruncate;
+  }
+
+  public set shouldTruncate(shouldTruncate: boolean) {
+    this._shouldTruncate = shouldTruncate;
+    setTimeout(() => {
+      this._changeDetectorRef.markForCheck();
+    });
+  }
+
+  get maxWidth(): number | undefined {
+    return this._maxWidth;
+  }
+
+  set maxWidth(maxWidth: number | undefined) {
+    this._maxWidth = maxWidth;
+    setTimeout(() => {
+      this._changeDetectorRef.markForCheck();
+    });
+  }
+
   get displayCrumb(): boolean {
     return this._displayCrumb;
   }
 
   /**
    * Whether to display the crumb or not
    */
-  set displayCrumb(shouldDisplay: boolean) {
+  public set displayCrumb(shouldDisplay: boolean) {
     this._displayCrumb = shouldDisplay;
     setTimeout(() => {
       this._changeDetectorRef.markForCheck();
@@ -82,12 +116,28 @@ export class TdBreadcrumbComponent implements AfterViewInit {
     return this._displayCrumb ? undefined : 'none';
   }
 
+  @HostBinding('style.max-width.px')
+  get maxWidthBinding(): number | undefined {
+    return this._shouldTruncate ? this._maxWidth : undefined;
+  }
+
+  @HostBinding('style.order')
+  get orderBinding(): number {
+    return this.flexOrder;
+  }
+
   ngAfterViewInit(): void {
     // set the width from the actual rendered DOM element
     setTimeout(() => {
       this._width = (<HTMLElement>(
-        this._elementRef.nativeElement
+        this.elementRef.nativeElement
       )).getBoundingClientRect().width;
+      const textSpan = this.elementRef.nativeElement.querySelector(
+        '.td-breadcrumb-text',
+      );
+      if (textSpan) {
+        this.fullText = textSpan.textContent?.trim() || '';
+      }
       this._changeDetectorRef.markForCheck();
     });
   }

libs/angular/breadcrumbs/src/breadcrumbs.component.html

@@ -1 +1,34 @@
 <ng-content></ng-content>
+
+@if (showOverflowButton) {
+  <button
+    mat-icon-button
+    class="td-breadcrumbs-overflow-button"
+    [matMenuTriggerFor]="overflowMenu"
+    [attr.aria-label]="overflowButtonAriaLabel"
+    [style.order]="overflowButtonOrder"
+    [attr.data-test-id]="'breadcrumb-overflow-button'"
+  >
+    <mat-icon>more_horiz</mat-icon>
+  </button>
+  <mat-icon
+    class="td-breadcrumb-separator-icon"
+    [style.order]="overflowButtonOrder"
+    color="primary"
+    aria-hidden="true"
+    >{{ separatorIcon }}</mat-icon
+  >
+}
+
+<mat-menu #overflowMenu="matMenu" class="td-breadcrumbs-overflow-menu">
+  @for (item of overflowMenuItems; track item; let index = $index) {
+    <button
+      mat-menu-item
+      (click)="handleOverflowItemClick(item)"
+      [attr.data-test-id]="'breadcrumb-overflow-item-' + index"
+      [attr.aria-label]="'Navigate to ' + getItemText(item)"
+    >
+      {{ getItemText(item) }}
+    </button>
+  }
+</mat-menu>

libs/angular/breadcrumbs/src/breadcrumbs.component.scss

@@ -6,3 +6,37 @@
     white-space: nowrap;
   }
 }
+
+.td-breadcrumbs-overflow-button {
+  margin: 0 4px;
+  flex-shrink: 0;
+
+  mat-icon {
+    font-size: 18px;
+    height: 18px;
+    width: 18px;
+    line-height: unset;
+  }
+
+  + .td-breadcrumb-separator-icon {
+    order: inherit;
+    font-size: 16px;
+    width: 16px;
+    height: 16px;
+    flex-shrink: 0;
+    margin: 0 10px;
+  }
+}
+
+.td-breadcrumb-overflow-menu {
+  max-width: 300px;
+
+  button {
+    max-width: 100%;
+
+    ::ng-deep .mat-mdc-menu-item-text {
+      white-space: normal;
+      line-height: 1.4;
+    }
+  }
+}