❌ This issue is not open for contribution. Visit Contributing guidelines to learn about the contributing process and how to find suitable issues.

In times when KListWithOverflow component didn't yet exist, we used the "duplicate markup" technique in the KBreadcrumbs component to achieve their overflow behavior when breadcrumb items were collapsed to the dropdown menu on the left:

The duplicate markup technique is based on keeping a hidden copy of visible breadcrumbs (breadcrumbs-offscreen) in the markup so that elements are available for recalculations:

Now that we have KListWithOverflow that is designed to take care of overflowing items to a menu, it would be good to remove this other implementation from KBreadcrumbs and refactor them to utilize KListWithOverflow instead.

The Value Add

Easier maintenance, development efficiency.

Guidance

Note that KListWithOverflow will likely need some updates to be able to display the button on the left side, and possibly some other adjustments so that these two components can collaborate smoothly.

Acceptance criteria

• There are no regressions in places where KBreadcrumbs and KListWithOverflow are used:
  • Live examples on their documentation pages
  • In Kolibri and Studio