RA Tree Menu

React admin is an awesome tool for creating admin panels easily. If you checked out RA Demo you may see tree like menus. But this menu isn't included in react-admin package.

This is unofficial react-admin plugin package which adds support for Tree Menu in RA apps.

Installation

Install using npm.

npm install --save ra-tree-menu

Basic usage

Here is the example code to use ra-tree-menu on your RA app.

// ./App.js
import React from 'react';
import { Admin, Resource } from 'react-admin';
import TreeMenuLayout from 'ra-tree-menu';
 
const App = () => (
    <Admin appLayout={TreeMenuLayout}>
        <Resource name="users" />
        <Resource name="user_posts" />
        <Resource name="user_images" />
        <Resource name="groups" />
        <Resource name="group_members" />
    </Admin>
);

The menu structure will be like this:

• Users
  • Users
  • User posts
  • User images
• Groups
  • Groups
  • Group members

Customization

Custom layout

If you want to use your custom appLayout, you can use TreeMenu component.

// ./CustomLayout.js
import React from 'react';
import { Layout } from 'react-admin';
import { TreeMenu } from 'ra-tree-menu';
 
export default props => (
    <Layout {...props} menu={TreeMenu} />
);

// ./App.js
import CustomLayout from './CustomLayout';
 
const App = () => (
    <Admin appLayout={CustomLayout}>
        ...
    </Admin>
);

Need to change menu structure?

No problem. You need to import tree menu component and extend it with your custom structure generator. Here's how:

import { CustomTreeMenu, ResFinder } from 'ra-tree-menu';
 
class MyTreeMenu extends CustomTreeMenu {
    generateStructure() {        
        const { resources } = this.props;
        const resByName = ResFinder(resources);
 
        var structure = [
            resByName('users'),
            resByName('lorem'),
            [
                resByName('ipsum'),
                resByName('dolor')
            ],
            resByName('sit')
        ];
 
        return structure;
    }
}

Check out full example: ./examples/custom_structure.js

Then use exported object to create your custom layout and set it to <Admin /> object as appLayout property.

Contributors

Misir Jafarov: https://misir.xyz
React Admin: https://github.com/marmelab/react-admin

Support