0

How can i a a top level menu in the appbar between the title and the usermenu ?

I tried something like this, but it do not work :

const MyAppBar = props => <AppBar {...props} userMenu={<MyUserMenu />} ><MyTopMenu /></AppBar>
sorcer1
  • 117
  • 3
  • 11

3 Answers3

1

Assuming you want to create a sub-menu in react-admin, you'll need to create a custom sub-menu component following the nested list technique from material-ui.
You will also need to create and use a custom menu as explained in react-admin's documentation.

PanosVl
  • 459
  • 6
  • 11
  • Thank you, but its for the sidebar menu. How to put this component in appbar ? – sorcer1 Oct 10 '18 at 12:43
  • Well, this is beyond the functionality and design of react-admin, so I guess you could try creating a custom AppBar that embeds one of the menus described in material-ui (https://material-ui.com/demos/menus/) but I am not sure if it would work or how you could go about it. – PanosVl Oct 10 '18 at 13:19
1

  1. An official way provided from the demo of react-admin: https://github.com/marmelab/react-admin/blob/master/examples/demo/src/layout/Menu.tsx (related answer)

  2. Check this new plugin dedicated for this purpose: ra-tree-menu

enter image description here

David DIVERRES
  • 1,811
  • 21
  • 30
1

As the ra-tree-menu package mentioned above by kxo didn't seem to be working well, I had to resort to develop a new package for this which could solve the use-case and further offer much more ease and flexibility for achieving the purpose.

You can check this out: ra-treemenu. A quick example of using it would be something like:

// In App.js
import * as React from 'react';
import { Admin, Resource, Layout } from 'react-admin';
/* Import TreeMenu from the package */
import TreeMenu from '@bb-tech/ra-treemenu';
 
const App = () => (
    <Admin layout={(props) => <Layout {...props} menu={TreeMenu} />} >
        {/* Dummy parent resource with isMenuParent options as true */}
        <Resource name="users" options={{ "label": "Users", "isMenuParent": true }} />
        {/* Children menu items under parent */}
        <Resource name="posts" options={{ "label": "Posts", "menuParent": "users" }} />
        <Resource name="comments" options={{ "label": "Comments", "menuParent": "users" }} />
        {/* Dummy parent resource with isMenuParent options as true */}
        <Resource name="groups" options={{ "label": "Groups", "isMenuParent": true }} />
        {/* Children menu items under parent */}
        <Resource name="members" options={{ "label": "Members", "menuParent": "groups" }} />
    </Admin>
);
 
export default App;
Harshit Budhraja
  • 37
  • 4