[Joy] Add Breadcrumbs component

[hbjORbj]

• I have followed (at least) the PR section of the contributing guide.

Done:

• Initial implementation
• Apply Joy theme
• Demos (Playground, Basic Usage, Collapsed Breadcrumbs, With Menu)

Demos: https://deploy-preview-32697--material-ui.netlify.app/joy-ui/react-breadcrumbs/

[mui-bot]

Details of bundle changes

@mui/joy: parsed: +0.77% , gzip: +0.68%

Generated by 🚫 dangerJS against bb4f99e

[siriwatknp]

Props

maxItems

I think the maxItems prop should be removed. This example is too specific from the UX perspective. The ... does not have to behave that way (one example is the overflow menu)

Developers can compose the ... by themselves. Joy should make it easy to do it by composing other components like using IconButton or Button. I expect the usage to be like this:

<Breadcrumbs maxItems={2} aria-label="breadcrumb">
  <Link underline="hover" color="inherit" href="#">
    Home
  </Link>
  {collapsed ? (
    <Button size="sm" onClick={uncollapse}>...</Button>
    ):(
    <React.Fragment>
      <Link underline="hover" color="inherit" href="#">
        Catalog
      </Link>
      <Link underline="hover" color="inherit" href="#">
        Accessories
      </Link>
    </React.Fragment>
  )}
  <Link underline="hover" color="inherit" href="#">
    New Collection
  </Link>
  <Typography color="text.primary">Belts</Typography>
</Breadcrumbs>

variant

I think let's remove the variant & color props from the breadcrumbs because I could not see the benefit of having them. If someone wants the variant, they can just use Sheet as a parent.

Demos

Here are some examples that I think we should add:

Basic

Combination of colors, separators, icons. When size changes, the size of icon & separator & text should change relative to the breadcrumb size.

The ••• button

With menu

You can use the MUI Base menu to test the composition.

https://youtu.be/kHL3gxAlvK8?t=236

[mbrookes]

This example is too specific from the UX perspective.

I would go further and say that it's incorrect. If the point of maxItems is to limit the width of the breadcrumbs, it doesn't make much sense to expand the breadcrumbs. Google uses a menu in Docs:

so it seems we should update the Material UI implementation.

I expect the usage to be like this

That's fine for a static example, but for most use cases the links are going to be programmatically generated. If it gets too complex, it might still be better as a feature of the component rather than an example.

The ••• button

More correctly, an ellipsis is a unicode symbol "⋯" rather than three separate dots.

[siriwatknp]

For the docs, giving feedback here might be easier.

Introduction

• The separator should have default value /

Component

I think this section should demonstrate props and how to use them with minimal code sample (it should stick to 1 prop if possible)

• Basic usage: choose the breadcrumbs that you think it is the most common (3 styles are too much).
• Separator: let's add a demo that uses an icon from @mui/icons-material as a separator.
• Accessibility: Add a suggestion about aria-current="page", read more

In each demo that you use Link, please add this so that clicking on it does not trigger the link behavior:

// The `preventDefault` is for demonstration purposes, generally, you don't need it in your application
<Link onClick={event => event.preventDefault()}>

Common examples

The idea of this section is to showcase advanced/real-world examples that use the component to build more complex interfaces. Also, stress test the component to make sure that the customization experience is great.

The demo you added is useful but I think it should be in this category. Or you can update the demo to make it look like Google

Also, you can replace MenuUnstyled with Joy Menu.

[hbjORbj]

Thanks for the detailed feedback, Jun. I addressed them. Let me know.

[siriwatknp]

Last review

Sorry for the multiple reviews. Next time, I will consolidate them in once.

1. The code block in the introduction

This once should be like this:

<Breadcrumbs>
  <Link />
  ...
</Breadcrumbs>

2. CSS variables

Let's shorten the Breadcrumb so that the preview and editor are in side-by-side. (reduce from 4 to 3 items if you have to)

3. Collapsible example

Too many colors in the demo. I think it is better to use just 1 color (may by info) and use comment that developers can change the color or put the link to learn more about the Link color instead.

4. Menu example

It is nice to add the link to the menu component page.

[siriwatknp]

👍 Thanks Benny!

[mbrookes]

A reminder (again) to please have a native English speaker review new or significantly changed docs before merging. We're accumulating significant non-technical debt. cc @samuelsycamore - you might like to submit a PR to clean the docs up for this component, and Joy UI as a whole.

[samuelsycamore]

cc @samuelsycamore - you might like to submit a PR to clean the docs up for this component, and Joy UI as a whole.

Good idea. I'll create a new issue to track revisions and start submitting PRs for the pages we have so far.

Edit: Here's that issue—#33998