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
| Name | Type | Default | Description |
|---|---|---|---|
| separator | node | Opens the typography subcomponent used to define the separator for the breadcrumbs. | |
| maxItems | integer | 8 | Specifies 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. |
| itemsBeforeCollapse | integer | 1 | If the max items is exceeded, the number of items to show before the ellipsis. |
| itemsAfterCollapse | integer | 1 | If the max items is exceeded, the number of items to show after the ellipsis. |
| expandText | string | show path | Overrides 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
| Name | Type | Default | Description |
|---|---|---|---|
| text | string | Defines the text to use as a separator character. | |
| variant | h1 h2 h3 h4 h5 h6 subtitle1 subtitle2 body1 body2 caption button overline inherit string | inherit | Defines the type of typography to display. |
| color | initial inherit primary secondary textPrimary textSecondary error string | inherit | Defines the color of the typography. |
| gutterBottom | bool | false | Enables a gutter at the bottom of the typography component. |
For more detail on the Breadcrumbs component, see the MUI developer docs.