React-Admin How to change the "Dashboard" name in the menu - dashboard

Question

How can I change the "dashoboard" menu name in the react-admin?
By default it's name is always "Dashboard" even in the Demo
the name is Dashboard. Someone knows a way to change the name or if it is even possible to change?

Answer 1

At the Menu.tsx, don't call it like
<DashboardMenuItem onClick={onMenuClick} sidebarIsOpen={open} />
Instead call it like a normal menu item but pointing to the dashboard component
<MenuItemLink
to={`/`} // by default react-admin renders Dashboard on this route
primaryText="Your Text"
leftIcon={<YourIcon />}
onClick={onMenuClick}
sidebarIsOpen={open}
dense={dense}
/>

Answer 2

Like in that answer is showed that in the MenuItemLink has an atribute called primaryText="Your Text" that you can use in your own
<DashboardMenuItem onClick={onMenuClick} classes={classes} primaryText="Your Text" />
To change the name of the default "Dashboard" name for what you want.

Answer 3

So more detailed answer is:
Override layout
// in src/Admin.js
<Admin
layout={MyLayout}
title="SuperCoolProject"
theme={myTheme}
dataProvider={dataProvider}
authProvider={authProvider}
>
Use custom menu in layout. (it's not sidebar)
// in src/MyLayout.js
import React from "react";
import { Layout } from "react-admin";
import MyMenu from "./MyMenu";
const MyLayout = (props) => <Layout {...props} menu={MyMenu} />;
export default MyLayout;
Change menu so it still renders resources and add custom MenuItemLinks you need (vs. one hardcoded "dashboard")
// in src/Menu.js
import React from "react";
import { useSelector } from "react-redux";
import { useMediaQuery } from "#material-ui/core";
import { MenuItemLink, getResources } from "react-admin";
import DefaultIcon from "#material-ui/icons/ViewList";
import SettingsIcon from "#material-ui/icons/Settings";
import HomeIcon from "#material-ui/icons/Home";
import HelpIcon from "#material-ui/icons/Help";
const Menu = ({ onMenuClick, logout }) => {
const isXSmall = useMediaQuery((theme) => theme.breakpoints.down("xs"));
const open = useSelector((state) => state.admin.ui.sidebarOpen);
const resources = useSelector(getResources);
return (
<div>
<MenuItemLink
to="/home"
primaryText="Home"
leftIcon={<HomeIcon />}
onClick={onMenuClick}
sidebarIsOpen={open}
/>
{resources.map((resource) => (
<MenuItemLink
key={resource.name}
to={`/${resource.name}`}
primaryText={
(resource.options && resource.options.label) || resource.name
}
leftIcon={resource.icon ? <resource.icon /> : <DefaultIcon />}
onClick={onMenuClick}
sidebarIsOpen={open}
/>
))}
<MenuItemLink
to="/custom-route"
primaryText="Settings"
leftIcon={<SettingsIcon />}
onClick={onMenuClick}
sidebarIsOpen={open}
/>
<MenuItemLink
to="/help-center"
primaryText="Help Center"
leftIcon={<HelpIcon />}
onClick={onMenuClick}
sidebarIsOpen={open}
/>
{isXSmall && logout}
</div>
);
};
export default Menu;