CODEWITHSUNDEEP
admin-on-restreact-admin
sorcer1
sorcer1

Reputation: 117

Add a top level menu in react-admin

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>

Upvotes: 0

Views: 7438

Answers (3)

Harshit Budhraja
Harshit Budhraja

Reputation: 37

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;

Upvotes: 1

David DIVERRES
David DIVERRES

Reputation: 1926

  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

Upvotes: 1

PanosVl
PanosVl

Reputation: 459

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.

Upvotes: 1

Related Questions