[breadcrumbs] Make `maxItems` responsive
Nobody has claimed this yet.
- Dominant language
- JavaScript
- Stars
- 99.1k
- Forks
- 32.5k
- Avg merge
- 2d 17h
- Merged PRs (30d)
- 106
Description
Search keywords
maxItems, responsive, breadcrumbs
Latest version
- I have tested the latest version
Summary
It would be great to support responsive values for the maxItems prop in Breadcrumbs. For example, on mobile I’d like to display a maximum of 2 segments to avoid visually cluttering my toolbar.
I’m aware there are workarounds using hooks and extra boilerplate code, but these negatively impact the developer experience.
Additionally, would it be possible to provide a way to define a custom action when clicking on the condensed "three dots"? In my use case, I’d like to prevent the expanding of the full path.
Examples
<Breadcrumbs maxItems={{ xs: 2, sm: 3, md: 4 }} aria-label="breadcrumb">
{pathnames.map(renderBreadcrumbItem)}
</Breadcrumbs>
Motivation
Improve responsiveness and DX.
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with the Breadcrumbs component and its maxItems prop, then inspect how responsive component values are handled elsewhere in the library. Define the supported responsive behavior and the custom action for the condensed three-dots control, and verify that mobile and larger breakpoints produce the expected breadcrumb display.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript, react
- Domain
- frontend
- Issue type
- Feature
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100