React-admin: Add breadcrumb

[jcornide]

A breadcrumb that would indicate the current path could improve usability, i.e. if I am in
/products/1/show
breadcrumb should be
Dashboard (home link) > Products (products link) > Product 1

[fzaninotto]

This can be done in userland pretty easily:

export const FooList = ({ history, ...rest }) => {
    const breadcrumbPath = [
        { url: "/foos", title: "Foos", isActive: false }
    ];
    return (
        <React.Fragment>
            <Breadcrumb path={breadcrumbPath} />
            <List {...rest}>
                <Datagrid>
                       ...
                </Datagrid>
            </List>
        </React.Fragment>
    );
}

So closing as nothing must be changed in core to allow this.

[gabrieltong]

@fzaninotto I have the same problem, I want to show the product name, like
Dashboard (home link) > Products (products link) > Product Name

[lalitjain98]

where is this Breadcrumb component defined? Is it a custom react component?

[fzaninotto]

It's a custom component, but you can easily write some MUI code directly with https://material-ui.com/components/breadcrumbs/#breadcrumbs

[RWOverdijk]

For the people scooting across this in the future, we use https://www.npmjs.com/package/react-router-breadcrumbs-hoc

It works quite well.