Getting Started

Install

npm

npm install react-simple-tree-menu

pnpm

pnpm add react-simple-tree-menu

yarn

yarn add react-simple-tree-menu

React is the only peer dependency. The library works on React 16.14 and up.

Your first tree

import TreeMenu from 'react-simple-tree-menu';
import 'react-simple-tree-menu/styles';

const data = {
  fruit: {
    label: 'Fruits',
    nodes: {
      apple: { label: 'Apple' },
      banana: { label: 'Banana' },
    },
  },
  vegetable: {
    label: 'Vegetables',
    nodes: {
      carrot: { label: 'Carrot' },
    },
  },
};

export default function App() {
  return <TreeMenu data={data} />;
}

Two data formats

data can be either an object (recommended for readability) or an array (recommended when order matters and you’re iterating from a DB/API result).

Object form

const data = {
  fruit: {
    label: 'Fruits',
    nodes: {
      apple: { label: 'Apple' },
    },
  },
};

Keys become the node key. Iteration order follows the object’s property order.

Array form

const data = [
  {
    key: 'fruit',
    label: 'Fruits',
    nodes: [{ key: 'apple', label: 'Apple' }],
  },
];

Every node must supply a unique key within its sibling group.

Skip our CSS

Prefer your own styles? Pass classNames and don’t import react-simple-tree-menu/styles.

<TreeMenu
  data={data}
  classNames={{
    item: 'my-item',
    active: 'my-item-active',
    focused: 'my-item-focused',
    search: 'my-search',
  }}
/>

See the Theming guide for the full list of slots.