Breadcrumbs API
The API documentation of the Breadcrumbs React component. Learn more about the props and the CSS customization points.
import { Breadcrumbs } from '@material-ui/core';Props
| Name | Type | Default | Description |
|---|---|---|---|
| children * | node | The breadcrumb children. | |
| classes | object | Override or extend the styles applied to the component. See CSS API below for more details. | |
| component | elementType | 'nav' | The component used for the root node. Either a string to use a DOM element or a component. By default, it maps the variant to a good default headline component. |
| itemsAfterCollapse | number | 1 | If max items is exceeded, the number of items to show after the ellipsis. |
| itemsBeforeCollapse | number | 1 | If max items is exceeded, the number of items to show before the ellipsis. |
| maxItems | number | 8 | Specifies the maximum number of breadcrumbs to display. When there are more than the maximum number, only the first and last will be shown, with an ellipsis in between. |
| separator | node | '/' | Custom separator node. |
The ref is forwarded to the root element.
Any other props supplied will be provided to the root element (native element).
CSS
- Style sheet name:
MuiBreadcrumbs. - Style sheet details:
| Rule name | Global class | Description |
|---|---|---|
| root | MuiBreadcrumbs-root | Styles applied to the root element. |
| ol | MuiBreadcrumbs-ol | Styles applied to the ol element. |
| li | MuiBreadcrumbs-li | Styles applied to the li element. |
| separator | MuiBreadcrumbs-separator | Styles applied to the separator element. |
You can override the style of the component thanks to one of these customization points:
- With a rule name of the
classesobject prop. - With a global class name.
- With a theme and an
overridesproperty.
If that's not sufficient, you can check the implementation of the component for more detail.
Notes
The component is fully StrictMode compatible.