feat(design): Add truncated design to DaffBreadcrumbComponent by joannalauu · Pull Request #4278 · graycoreio/daffodil

joannalauu · 2026-01-07T18:19:44Z

This also deprecates the DaffMenuModule.

PR Checklist

Commit message follows our contributing guidelines
Tests added/updated (for bug fixes/features)
Documentation added/updated (for bug fixes/features)

PR Type

Current behavior

Fixes: #3513

Developed on top of #3569

New behavior

Truncates breadcrumbs into an overflow menu on mobile and when more than five items are present on desktop
Deprecates DaffMenuModule

Breaking change?

Yes
No

Additional context

xelaint · 2026-01-08T15:00:31Z

Blocked by #3998 (needs to be merged before this)

xelaint

I don't think it's fully working. This is what I see when I open menu in mobile, close it, then go back to desktop view.

To repro:

Update viewport to mobile
Click on ... to open menu
Close menu
Go back to desktop viewport

xelaint · 2026-01-08T15:37:35Z

libs/design/breadcrumb/src/breadcrumb/breadcrumb.component.html

+<ng-template #fullMenu>
+	<daff-menu>
+		@for (breadcrumbItem of _fullMenuItems(); track breadcrumbItem; let index = $index) {
+			<button daff-menu-item>


We need to ability to choose between a <button daff-menu-item> or <a daff-menu-item> and pass in the link to the daff-menu-item.

This structure is bad:

This should be:

<a daff-menu-item href="/docs"> <div class="daff-menu-item__content"> Docs </div> </a>

I have not been able to find a good solution to achieve this without breaking other behaviour.

Right now, the breadcrumb is passed into the menu through
<ng-container [ngTemplateOutlet]="breadcrumbItem.itemRef"></ng-container>
as <a href="/docs">Docs</a>, and there isn't really a way to extract the href and innerHTML while keeping the menu content up-to-date, because the menu is usually not re-rendered when switched to another page.

Perhaps it might be better to just keep the structure as it is, even through it isn't ideal? Please let me know if you have any ideas on an effective solution to this.

xelaint

There's a few things breaking:

active is no longer set on the active breadcrumb item
breadcrumb items are not being rendered correctly on page change

Screen.Recording.2026-01-09.at.11.09.20.AM.mov

joannalauu · 2026-01-09T22:45:52Z

@xelaint I really sorry about not thoroughly review my code before requesting a review. I have fixed the breadcrumb behaviour to work as intended, aside from the daff-menu structure which I have elaborated more in the discussion thread.

damienwebdev · 2026-02-12T15:46:23Z

We need to share the interface between MenuItem and BreadcrumbItem so that the actual HTML element is an a or button in both circumstances. We don't want buttons inside buttons or a in a, or new a where it could have been the original a element from the breadcrumb.

xelaint

active is still not set on the active breadcrumb item

xelaint · 2026-03-02T16:38:43Z

libs/design/breadcrumb/src/breadcrumb/breadcrumb.component.scss

+			}
+		}
+
+		&:nth-child(2),


Can the logic for calculating what is shown be set by toRenderType instead of having to do it via css?

xelaint · 2026-03-02T16:40:20Z

libs/design/breadcrumb/src/breadcrumb/breadcrumb.component.spec.ts

+      expect(breadcrumbItems.length).toBe(4);
+    });
+
+    it('should compute 5 breadcrumb items', () => {


Why would 5 breadcrumb items be computed if there are less than 5 breadcrumbs? Shouldn't the max be 4?

xelaint · 2026-03-02T16:44:44Z

libs/design/breadcrumb/src/breadcrumb/breadcrumb.component.spec.ts

+    DaffBreadcrumbItemComponent,
+  ],
+})
+class WrapperComponentWith4Items {}


Please avoid using digits in class names

xelaint · 2026-03-02T16:49:12Z

libs/design/breadcrumb/README.md

 ### Daffodil provides
 - `aria-current="page"` automatically applied to the last breadcrumb item
 - Enforces semantic HTML structure (requires `<ol>` and `<li>` elements)
+- Truncates breadcrumbs into an overflow menu on mobile and when more than five items are present on desktop


Doesn't belong in accessibility. Should be moved into a ## Features section after ## Anatomy:

## Features ### Truncation Breadcrumbs are automatically truncated into an overflow menu on mobile viewports. On desktop, truncation occurs when more than five items are present.

…mDirective`

xelaint · 2026-03-04T17:27:43Z

libs/design/breadcrumb/src/breadcrumb/breadcrumb.component.spec.ts

+      fixture7.detectChanges();
+    });
+
+    it('should compute 5 breadcrumb items', () => {


this test is confusing. if there are more than 5 breadcrumb items, it should compute more than just 5.

xelaint · 2026-03-04T17:33:19Z

libs/design/breadcrumb/src/breadcrumb/breadcrumb.component.html

+	}
+}
+
+<ng-template #fullMenu>


@damienwebdev thoughts on updating this template name to #mobileMenu and the #partialMenu as #desktopMenu? I think this is more semantically correct since these menus are rendered depending on what screen size the display is.

joannalauu requested review from a team as code owners January 7, 2026 18:19

xelaint mentioned this pull request Jan 8, 2026

feat(design)!: update breadcrumb component to support truncation #3569

Closed

3 tasks

xelaint added package: design @daffodil/design status: pending review This PR is awaiting review or response from a reviewer before the author can proceed. labels Jan 8, 2026

xelaint requested changes Jan 8, 2026

View reviewed changes

joannalauu force-pushed the feat/breadcrumb-truncate branch from 1f98924 to 147afb4 Compare January 8, 2026 20:58

joannalauu requested a review from xelaint January 8, 2026 22:13

xelaint requested changes Jan 9, 2026

View reviewed changes

joannalauu force-pushed the feat/breadcrumb-truncate branch 3 times, most recently from 4b6e3f4 to 5704534 Compare January 9, 2026 22:39

joannalauu requested a review from xelaint January 15, 2026 23:40

xelaint added status: wip This PR is WIP. It should be marked as a draft. and removed status: pending review This PR is awaiting review or response from a reviewer before the author can proceed. labels Feb 12, 2026

joannalauu force-pushed the feat/breadcrumb-truncate branch from 5d55ea5 to d0ef854 Compare February 21, 2026 18:50

xelaint requested a review from damienwebdev February 23, 2026 18:04

xelaint added status: pending review This PR is awaiting review or response from a reviewer before the author can proceed. and removed status: wip This PR is WIP. It should be marked as a draft. labels Feb 23, 2026

xelaint requested changes Feb 23, 2026

View reviewed changes

xelaint added status: needs response This PR is waiting for a response from the author and removed status: pending review This PR is awaiting review or response from a reviewer before the author can proceed. labels Feb 25, 2026

joannalauu force-pushed the feat/breadcrumb-truncate branch 2 times, most recently from 58e0277 to ce007e8 Compare February 25, 2026 23:35

joannalauu requested a review from xelaint February 25, 2026 23:41

xelaint requested changes Mar 2, 2026

View reviewed changes

joannalauu force-pushed the feat/breadcrumb-truncate branch from ce007e8 to 16591ec Compare March 3, 2026 21:23

joannalauu and others added 16 commits March 3, 2026 16:25

full menu always displays

ffce276

Breadcrumb item at index 2 shows up in partial menu

29a720d

Add spec tests for menu behavior in breadcrumb

fb71924

Adjust breadcrumb folder structure

b40e510

Update readme

adc2120

Deprecate DaffMenuModule

70ce2e9

Rerender breadcrumb on viewport change

83a9d43

feat: allow breadcrumb item to render inside menu

e539c86

Document the use of DAFF_MENU_ITEM_TOKEN and `DaffBreadcrumbMenuIte…

39d7e87

…mDirective`

Remove styling class on destroy

0954ae3

Add close on click event handler

ed05050

Add tests for DaffBreadcrumbMenuItemDirective

d7d479c

Set breadcrumb item active

bdb1f62

Move breadcrumb display logic to toRenderType

e83a721

Fix breadcrumb spec tests

2872b67

Fix breadcrumb docs

2d78c82

joannalauu force-pushed the feat/breadcrumb-truncate branch from 16591ec to 2d78c82 Compare March 3, 2026 21:25

joannalauu requested a review from xelaint March 3, 2026 21:32

xelaint added status: pending review This PR is awaiting review or response from a reviewer before the author can proceed. and removed status: needs response This PR is waiting for a response from the author labels Mar 4, 2026

xelaint requested changes Mar 4, 2026

View reviewed changes

Fix spec test name

0d006ff

joannalauu requested a review from xelaint March 5, 2026 01:05

Uh oh!

Conversation

joannalauu commented Jan 7, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

PR Checklist

PR Type

Current behavior

New behavior

Breaking change?

Additional context

Uh oh!

xelaint commented Jan 8, 2026

Uh oh!

xelaint left a comment

Choose a reason for hiding this comment

Uh oh!

xelaint Jan 8, 2026

Choose a reason for hiding this comment

Uh oh!

joannalauu Jan 9, 2026

Choose a reason for hiding this comment

Uh oh!

xelaint left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

joannalauu commented Jan 9, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

damienwebdev commented Feb 12, 2026

Uh oh!

xelaint left a comment

Choose a reason for hiding this comment

Uh oh!

xelaint Mar 2, 2026

Choose a reason for hiding this comment

Uh oh!

xelaint Mar 2, 2026

Choose a reason for hiding this comment

Uh oh!

xelaint Mar 2, 2026

Choose a reason for hiding this comment

Uh oh!

xelaint Mar 2, 2026

Choose a reason for hiding this comment

Uh oh!

xelaint Mar 4, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

xelaint Mar 4, 2026

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

joannalauu commented Jan 7, 2026 •

edited

Loading

xelaint left a comment •

edited

Loading

joannalauu commented Jan 9, 2026 •

edited

Loading

xelaint Mar 4, 2026 •

edited

Loading