React-admin title not displaying on navbar

Question

Seems like a simple thing. How do I put a title on the navbar? Here's my App.js:

import React from 'react';
import { Admin, Resource } from 'react-admin';
import { UserList } from './Users';
import { ItemList, ItemEdit, ItemCreate } from './Items';
import { ProductTypeList, ProductTypeEdit, ProductTypeCreate } from './ProductType'
import Dashboard from './Dashboard'
import jsonServerProvider from 'ra-data-json-server';
import dataProvider from './dataProvider';
import ItemIcon from '@material-ui/icons/ViewListRounded';
import ProductTypeIcon from '@material-ui/icons/LocalOffer';
import UserIcon from '@material-ui/icons/Group';
import authProvider from './authProvider'

const App = () => (
  <Admin
    dashboard={Dashboard}
    authProvider={authProvider}
    dataProvider={dataProvider} >
    <Resource
      name="items"
      list={ItemList}
      edit={ItemEdit}
      create={ItemCreate}
      icon={ItemIcon} />
    {<Resource
      name="productTypes"
      options={{ label: 'Product Types' }}
      list={ProductTypeList}
      edit={ProductTypeEdit}
      create={ProductTypeCreate}
      icon={ProductTypeIcon} />}
    <Resource
      name="users"
      list={UserList}
      icon={UserIcon} />
  </Admin >
);

export default App;

Running react-admin version 3.4.2. In the tutorial it shows "React Admin" as the title after adding the Dashboard. But after recreating a fresh app using npm create-react-app and going through the tutorial, I don't see a title in the navbar. Is this something that should be possible out of the box or do I need to create a custom navbar?

probably the title or name attribute https://marmelab.com/react-admin/Admin.html — Train, Apr 22 '20 at 23:49
I did add the title attribute to App but nothing changed. Thanks though. — Dan G., Apr 22 '20 at 23:56
Sorry. I meant not App. However, you sparked an idea when you said "just like you did resources". So I tried adding and it worked. See my answer below. Thanks. — Dan G., Apr 23 '20 at 03:57

Dan G. · Accepted Answer · 2020-04-23T04:47:01.510

Train (above) led me to think of the component. I imported it and used it within and set title="My Title" and it did show in the navbar. Maybe I misread the docs, but I don't remember seeing anything about , just the title= attribute of , like so:

  <Admin
    // layout={CustomLayout}
    dashboard={Dashboard}
    authProvider={authProvider}
    dataProvider={dataProvider} >
    <Title title="g3tools Admin" />
    <Resource
      name="items"
      list={ItemList}
      edit={ItemEdit}
      create={ItemCreate}
      icon={ItemIcon} />

But, thankfully, it gets me to the next step: Now the title shows up in the navbar but when I choose a resource from the left menu, the resource name appends to the title.

Any suggestions on how to avoid the resource title cramming into the admin title? I'm sure I'm missing something obvious. Options would be: a) Dynamically ad a space or dash after title when resource title is displayed, or b) don't display the resource title (how would I do that?)

I think ultimately, I'd rather have a breadcrumb or show the resource title in the center of the navbar, but maybe I'll need a custom navbar for that?? Any guidance is welcome.

UPDATE: I see in the docs for Customizing the AppBar how to not show the individual resource page title: Just remove the id="react-admin-title" from the component and then add text to the element:

<AppBar {...props}>
  <Typography
    variant="h6"
    color="inherit"
    className={classes.title}
  >g3tools Admin</Typography>
</AppBar>

thanks for sharing Dan, you answered your own question. joy of learning right :) — user3366943, Apr 23 '20 at 13:35
Module not found: Can't resolve '@material-ui/core/Title' in '/home/gabi/Bureau/mlp_analysis_ui/src' — gal007, Jul 16 '20 at 01:09

score 1 · Answer 2 · answered Apr 23 '20 at 00:15

1

take a look in the docs, try this

<Admin
   // add the title prop below
   title="my page title"
   dashboard={Dashboard}
   authProvider={authProvider}
   dataProvider={dataProvider} >

answered Apr 23 '20 at 00:15

user3366943

253
1
6

2

Yes, I tried that. Thanks. Thought it work too. But, I see nothing showing up in the navbar. Still blank. – Dan G. Apr 23 '20 at 03:16

React-admin title not displaying on navbar

2 Answers2