Skip to main content

Breadcrumbs

The Breadcrumbs component displays a list of links that help the user visualize a page's location within the structure of a website and allows navigation to any page within the list. The component uses either Typography or Link components to create the location list.

Properties

NameTypeDefaultDescription
separatornodeOpens the typography subcomponent used to define the separator for the breadcrumbs.
maxItemsinteger8Specifies the maximum number of breadcrumbs to display. The items before collapse and the items after collapse, will display with an ellipsis between them if the maximum number is exceeded.
itemsBeforeCollapseinteger1If the max items is exceeded, the number of items to show before the ellipsis.
itemsAfterCollapseinteger1If the max items is exceeded, the number of items to show after the ellipsis.
expandTextstringshow pathOverrides the default label for the expand button.

Subcomponents

The Breadcrumbs component has a Typography subcomponent that allows for a separator character between breadcrumb items.

Typography

Specifies a separator character to separate the breadcrumb items.

For further details, see the Typography component.

Properties

NameTypeDefaultDescription
textstringDefines the text to use as a separator character.
varianth1
h2
h3
h4
h5
h6
subtitle1
subtitle2
body1
body2
caption
button
overline
inherit
string
inheritDefines the type of typography to display.
colorinitial
inherit
primary
secondary
textPrimary
textSecondary
error
string
inheritDefines the color of the typography.
gutterBottomboolfalseEnables a gutter at the bottom of the typography component.

For more detail on the Breadcrumbs component, see the MUI developer docs.

on this page
Was this article useful?
89% of our users said this content was useful.