MUI Breadcrumbs - How To Hide First Item And Separator

shadimahfouz 0
Viewed 29

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?

breadcrumbs frontend material-ui reactjs
1 Answers

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.

Ahmet Emre Kılınç0
Related