Breadcrumbs: Overflow control?

[getflourish]

This is a feature request, that you might already have planned. But I’ll report it anyway: it would be nice to control the overflow of the breadcrumbs. Currently it wraps on a multiple lines which is often a good solution. But in the future these would be useful and make it a more flexible component for many use cases:

• truncate the middle, so that both the start and end of a path are visible
• truncate the end by showing overflowing items in a dropdown

[getflourish]

Related:

When the active item wraps, the spacing between breadcrumbs and the active items gets more dense.

Default:

Dense spacing with overflow:

[imoutaharik]

The second issue reported has been fixed.

I created a task to address the truncate feature request. We actually have a design for this and an overflow menu will be added soon.

[jonasbuechel]

There's a solution design for truncating overflowing breadcrumbs here: https://www.figma.com/file/pevuvey1joCsopTRr9f4OE/Fondue---Components?node-id=11988%3A437657

[getflourish]

Still an issue. I just added some junk content to the component on Storybook:

This is mainly an issue when the component is used in narrow contexts, e.g. sidebars or mobile

[ryancarville]

Thanks @getflourish! Sorry I removed my previous comment as I just dove into the Figma and the component and quickly realised it is still open. I am on it!

[ryancarville]

Will this solution still satisfy your request? Design was from a year ago so I am not sure.

[getflourish]

Looks good to me! Paired with text overflow of the individual items, this would allow the breadcrumbs to stay on a single row. But I think it’s worth keeping the old wrapping behavior as an option, too.

[ryancarville]

@getflourish if you like to and when you can HERE is a preview of the logic for truncation. Let me know if you see anything I am missing.

[ryancarville]

@getflourish do you have a opinion on what the maximum width of a crumb should be? If we want to enforce line wrapping we need to set a max-width. I feel like 100px is a nice place to be.