MUI 面包屑 - 如何隐藏第一项和分隔符

Question

I'm using the MUI Breadcrumbs component on a site I'm working on and I'm just about done but I'm trying to hide the first item in the path. I'm able to hide the actual word itself, but I can't figure out how to hide the separator.

For example, this is how it's structured now:

"W > X > Y"

This is how I want it to look:

"X > Y"

This is what I'm currently showing because I can't hide the first separator:

"> X > Y"

Anyone have any ideas on how to hide that first separator?

Answer 1

You can add a custom class to the Breadcrumbs component like this:

<Breadcrumbs className="breadcrumbsCustomStyle"

and using css set display: none; for the first two li children of this class like this:

.breadcrumbsCustomStyle li:first-child,
.breadcrumbsCustomStyle li:nth-child(2) {
    display: none;
}

You can take a look at this sandbox for a live working example of this approach.