Tree view

React Bootstrap 5 Tree view plugin

MDB treeview plugin is used to show hierarchical information which starts from the root item and proceed to its children and their respective children. Each item besides the root has a parent and can have children.

The parent is the node which is higher in the hierarchy and the child the one that is lower. Siblings are items which have one and the same parent. Items can be expanded and collapsed.

Note: Read the API tab to find all available options and advanced customization

Basic example - JSX

import React from 'react';
import { MDBTreeview, MDBTreeviewItem } from 'mdb-react-treeview';

export default function App() {
  return (
    <MDBTreeview>
      <MDBTreeviewItem name='One' />
      <MDBTreeviewItem name='Two' />
      <MDBTreeviewItem subtree show name='Three'>
        <MDBTreeviewItem name='Second-one' />
        <MDBTreeviewItem name='Second-two' />
        <MDBTreeviewItem name='Second-three' subtree>
          <MDBTreeviewItem name='Third-one' subtree>
            <MDBTreeviewItem name='Fourth-one' />
            <MDBTreeviewItem name='Fourth-two' />
            <MDBTreeviewItem name='Fourth-three' />
          </MDBTreeviewItem>
          <MDBTreeviewItem name='Third-two' />
          <MDBTreeviewItem name='Third-three' subtree>
            <MDBTreeviewItem name='Fourth-one' />
            <MDBTreeviewItem name='Fourth-two' />
            <MDBTreeviewItem name='Fourth-three' />
          </MDBTreeviewItem>
        </MDBTreeviewItem>
      </MDBTreeviewItem>
    </MDBTreeview>
  );
}

Basic example - JavaScript

You can define whole structure of tree using only JavaScript. There are some props in data that you can use to customize it: 

import React from 'react';
import { MDBTreeview } from 'mdb-react-treeview';

export default function App() {
  return (
    <MDBTreeview
      items={[
        { name: 'One' },
        { name: 'Two' },
        {
          name: 'Three',
          children: [
            { name: 'Second-one' },
            { name: 'Second-two' },
            {
              name: 'Second-three',
              children: [
                {
                  name: 'Third-one',

                  children: [{ name: 'Fourth-one' }, { name: 'Fourth-two' }, { name: 'Fourth-three' }],
                },
                { name: 'Third-two' },
                {
                  name: 'Third-three',
                  children: [{ name: 'Fourth-one' }, { name: 'Fourth-two' }, { name: 'Fourth-three' }],
                },
              ],
            },
          ],
        },
      ]}
    />
  );
}

Open on item click

Use a openOnItemClick to define opening lists of treeview by click only on the arrow or on the whole list item. 

import React from 'react';
import { MDBTreeview, MDBTreeviewItem } from 'mdb-react-treeview';

export default function App() {
  return (
    <MDBTreeview openOnItemClick={false}>
      <MDBTreeviewItem name='One' />
      <MDBTreeviewItem name='Two' />
      <MDBTreeviewItem subtree name='Three' show>
        <MDBTreeviewItem name='Second-one' />
        <MDBTreeviewItem name='Second-two' />
        <MDBTreeviewItem name='Second-three' subtree>
          <MDBTreeviewItem name='Third-one' subtree>
            <MDBTreeviewItem name='Fourth-one' />
            <MDBTreeviewItem name='Fourth-two' />
            <MDBTreeviewItem name='Fourth-three' />
          </MDBTreeviewItem>
          <MDBTreeviewItem name='Third-two' />
          <MDBTreeviewItem name='Third-three' subtree>
            <MDBTreeviewItem name='Fourth-one' />
            <MDBTreeviewItem name='Fourth-two' />
            <MDBTreeviewItem name='Fourth-three' />
          </MDBTreeviewItem>
        </MDBTreeviewItem>
      </MDBTreeviewItem>
    </MDBTreeview>
  );
}

Selectable

Use a selectable property to set up checkboxes in every list item.

import React from 'react';
import { MDBTreeview, MDBTreeviewItem } from 'mdb-react-treeview';

export default function App() {
  return (
    <MDBTreeview selectable>
      <MDBTreeviewItem name='One' />
      <MDBTreeviewItem name='Two' />
      <MDBTreeviewItem subtree name='Three'>
        <MDBTreeviewItem name='Second-one' />
        <MDBTreeviewItem name='Second-two' />
        <MDBTreeviewItem name='Second-three' subtree>
          <MDBTreeviewItem name='Third-one' subtree>
            <MDBTreeviewItem name='Fourth-one' />
            <MDBTreeviewItem name='Fourth-two' />
            <MDBTreeviewItem name='Fourth-three' />
          </MDBTreeviewItem>
          <MDBTreeviewItem name='Third-two' />
          <MDBTreeviewItem name='Third-three' subtree>
            <MDBTreeviewItem name='Fourth-one' />
            <MDBTreeviewItem name='Fourth-two' />
            <MDBTreeviewItem name='Fourth-three' />
          </MDBTreeviewItem>
        </MDBTreeviewItem>
      </MDBTreeviewItem>
    </MDBTreeview>
  );
}

Expand

import React, { useState } from 'react';
import { MDBTreeview, MDBTreeviewItem } from 'mdb-react-treeview';
import { MDBRow, MDBCol, MDBBtn } from 'mdb-react-ui-kit';

export default function App() {
  const [expandExample, setExpandExample] = useState(false);

  return (
    <MDBRow className='justify-content-center mb-3'>
      <MDBCol md='3'>
        <MDBBtn style={{ minWidth: '155px' }} onClick={() => setExpandExample(true)}>
          Expand first list
        </MDBBtn>
      </MDBCol>
    </MDBRow>
    <MDBRow>
      <MDBTreeview>
        <MDBTreeviewItem name='One' />
        <MDBTreeviewItem name='Two' />
        <MDBTreeviewItem subtree show={expandExample} name='Three'>
          <MDBTreeviewItem name='Second-one' />
          <MDBTreeviewItem name='Second-two' />
          <MDBTreeviewItem name='Second-three' subtree>
            <MDBTreeviewItem name='Third-one' subtree>
              <MDBTreeviewItem name='Fourth-one' />
              <MDBTreeviewItem name='Fourth-two' />
              <MDBTreeviewItem name='Fourth-three' />
            </MDBTreeviewItem>
            <MDBTreeviewItem name='Third-two' />
            <MDBTreeviewItem name='Third-three' subtree>
              <MDBTreeviewItem name='Fourth-one' />
              <MDBTreeviewItem name='Fourth-two' />
              <MDBTreeviewItem name='Fourth-three' />
            </MDBTreeviewItem>
          </MDBTreeviewItem>
        </MDBTreeviewItem>
      </MDBTreeview>
    </MDBRow>
  );
}

Collapse

import React, { useState } from 'react';
import { MDBTreeview, MDBTreeviewItem } from 'mdb-react-treeview';
import { MDBRow, MDBCol, MDBBtn } from 'mdb-react-ui-kit';

export default function App() {
  const [collapseExample, setCollapseExample] = useState(true);

  return (
    <MDBRow className='justify-content-center mb-3'>
      <MDBCol md='3'>
        <MDBBtn style={{ minWidth: '155px' }} onClick={() => setCollapseExample(false)}>
          Collapse Treeview
        </MDBBtn>
      </MDBCol>
    </MDBRow>
    <MDBRow>
      <MDBTreeview>
        <MDBTreeviewItem name='One' />
        <MDBTreeviewItem name='Two' />
        <MDBTreeviewItem subtree show={collapseExample} name='Three'>
          <MDBTreeviewItem name='Second-one' />
          <MDBTreeviewItem name='Second-two' />
          <MDBTreeviewItem name='Second-three' show subtree>
            <MDBTreeviewItem name='Third-one' show subtree>
              <MDBTreeviewItem name='Fourth-one' />
              <MDBTreeviewItem name='Fourth-two' />
              <MDBTreeviewItem name='Fourth-three' />
            </MDBTreeviewItem>
            <MDBTreeviewItem name='Third-two' />
            <MDBTreeviewItem name='Third-three' show subtree>
              <MDBTreeviewItem name='Fourth-one' />
              <MDBTreeviewItem name='Fourth-two' />
              <MDBTreeviewItem name='Fourth-three' />
            </MDBTreeviewItem>
          </MDBTreeviewItem>
        </MDBTreeviewItem>
      </MDBTreeview>
    </MDBRow>
  );
}

Custom icons - JSX

Use a rotationAngle property to define a rotation angle of nested lists icons. 

import React from 'react';
import { MDBTreeview, MDBTreeviewItem } from 'mdb-react-treeview';

export default function App() {
  return (
    <MDBTreeview>
      <MDBTreeviewItem
        name={
          <>
            <MDBIcon icon='dot-circle' fas /> One
          </>
        }
      />
      <MDBTreeviewItem
        name={
          <>
            <MDBIcon icon='dot-circle' fas /> Two
          </>
        }
      />
      <MDBTreeviewItem subtree show icon='angle-double-right' name='Three'>
        <MDBTreeviewItem
          name={
            <>
              <MDBIcon icon='dot-circle' fas /> Second-one
            </>
          }
        />
        <MDBTreeviewItem
          name={
            <>
              <MDBIcon icon='dot-circle' fas /> Second-two
            </>
          }
        />
        <MDBTreeviewItem name='Second-three' icon='angle-double-right' subtree>
          <MDBTreeviewItem name='Third-one' icon='angle-double-right' subtree>
            <MDBTreeviewItem
              name={
                <>
                  <MDBIcon icon='dot-circle' fas /> Fourth-one
                </>
              }
            />
            <MDBTreeviewItem
              name={
                <>
                  <MDBIcon icon='dot-circle' fas /> Fourth-two
                </>
              }
            />
            <MDBTreeviewItem
              name={
                <>
                  <MDBIcon icon='dot-circle' fas /> Fourth-three
                </>
              }
            />
          </MDBTreeviewItem>
          <MDBTreeviewItem
            name={
              <>
                <MDBIcon icon='dot-circle' fas /> Third-two
              </>
            }
          />
          <MDBTreeviewItem name='Third-three' icon='angle-double-right' subtree>
            <MDBTreeviewItem
              name={
                <>
                  <MDBIcon icon='dot-circle' fas /> Fourth-one
                </>
              }
            />
            <MDBTreeviewItem
              name={
                <>
                  <MDBIcon icon='dot-circle' fas /> Fourth-two
                </>
              }
            />
            <MDBTreeviewItem
              name={
                <>
                  <MDBIcon icon='dot-circle' fas /> Fourth-three
                </>
              }
            />
          </MDBTreeviewItem>
        </MDBTreeviewItem>
      </MDBTreeviewItem>
    </MDBTreeview>
  );
}

Custom icons - JavaScript

Add icons to the list elements by pasting an icon code in the name property. If you want to change the rotatable icon in the nested list - use icon property instead. 

import React from 'react';
import { MDBTreeview, MDBTreeviewItem } from 'mdb-react-treeview';

export default function App() {
  return (
    <MDBTreeview
      items={[
        {
          name: (
            <>
              <MDBIcon icon='dot-circle' fas /> One{' '}
            </>
          ),
        },
        {
          name: (
            <>
              <MDBIcon icon='dot-circle' fas /> Two{' '}
            </>
          ),
        },
        {
          name: 'Three',
          subtree: true,
          icon: 'angle-double-right',
          children: [
            {
              name: (
                <>
                  <MDBIcon icon='dot-circle' fas /> Second-one{' '}
                </>
              ),
            },
            {
              name: (
                <>
                  <MDBIcon icon='dot-circle' fas /> Second-two{' '}
                </>
              ),
            },
            {
              name: 'Second-three',
              subtree: true,
              icon: 'angle-double-right',
              children: [
                {
                  name: 'Third-one',
                  icon: 'angle-double-right',
                  subtree: true,
                  children: [
                    {
                      name: (
                        <>
                          <MDBIcon icon='dot-circle' fas /> Fourth-one
                        </>
                      ),
                    },
                    {
                      name: (
                        <>
                          <MDBIcon icon='dot-circle' fas /> Fourth-two
                        </>
                      ),
                    },
                    {
                      name: (
                        <>
                          <MDBIcon icon='dot-circle' fas /> Fourth-three
                        </>
                      ),
                    },
                  ],
                },
                {
                  name: (
                    <>
                      <MDBIcon icon='dot-circle' fas /> Third-two
                    </>
                  ),
                },
                {
                  name: 'Third-three',
                  subtree: true,
                  icon: 'angle-double-right',
                  children: [
                    {
                      name: (
                        <>
                          <MDBIcon icon='dot-circle' fas /> Fourth-one
                        </>
                      ),
                    },
                    {
                      name: (
                        <>
                          <MDBIcon icon='dot-circle' fas /> Fourth-two
                        </>
                      ),
                    },
                    {
                      name: (
                        <>
                          <MDBIcon icon='dot-circle' fas /> Fourth-three
                        </>
                      ),
                    },
                  ],
                },
              ],
            },
          ],
        },
      ]}
    />
  );
}

Color

Set the color of an active item using the color property.

Current color: primary
import React, { useState } from 'react';
import { MDBTreeview, MDBTreeviewItem } from 'mdb-react-treeview';
import { MDBRow, MDBBtn } from 'mdb-react-ui-kit';

export default function App() {
  const [color, setColor] = useState('primary');

  return (
    <>
      <div className='text-center mb-5'>
        <MDBBtn color='primary' onClick={() => setColor('primary')}>
          Primary
        </MDBBtn>
        <MDBBtn color='secondary' onClick={() => setColor('secondary')}>
          Secondary
        </MDBBtn>
        <MDBBtn color='warning' onClick={() => setColor('warning')}>
          Warning
        </MDBBtn>
        <MDBBtn color='danger' onClick={() => setColor('danger')}>
          Danger
        </MDBBtn>
        <MDBBtn color='info' onClick={() => setColor('info')}>
          Info
        </MDBBtn>
        <MDBBtn color='success' onClick={() => setColor('success')}>
          Success
        </MDBBtn>
        <MDBBtn color='dark' onClick={() => setColor('dark')}>
          Dark
        </MDBBtn>
      </div>

      <MDBRow className='mt-3'>
        <MDBTreeview color={color}>
          <MDBTreeviewItem name='One' />
          <MDBTreeviewItem name='Two' />
          <MDBTreeviewItem subtree show name='Three'>
            <MDBTreeviewItem name='Second-one' />
            <MDBTreeviewItem name='Second-two' />
            <MDBTreeviewItem name='Second-three' subtree>
              <MDBTreeviewItem name='Third-one' subtree>
                <MDBTreeviewItem name='Fourth-one' />
                <MDBTreeviewItem name='Fourth-two' />
                <MDBTreeviewItem name='Fourth-three' />
              </MDBTreeviewItem>
              <MDBTreeviewItem name='Third-two' />
              <MDBTreeviewItem name='Third-three' subtree>
                <MDBTreeviewItem name='Fourth-one' />
                <MDBTreeviewItem name='Fourth-two' />
                <MDBTreeviewItem name='Fourth-three' />
              </MDBTreeviewItem>
            </MDBTreeviewItem>
          </MDBTreeviewItem>
        </MDBTreeview>
      </MDBRow>
    </>
  );
}

Line

Use a line property to set up an additional line in every nested list. 

import React from 'react';
import { MDBTreeview, MDBTreeviewItem } from 'mdb-react-treeview';

export default function App() {
  return (
    <MDBTreeview line>
      <MDBTreeviewItem name='One' />
      <MDBTreeviewItem name='Two' />
      <MDBTreeviewItem subtree show name='Three'>
        <MDBTreeviewItem name='Second-one' />
        <MDBTreeviewItem name='Second-two' />
        <MDBTreeviewItem name='Second-three' subtree>
          <MDBTreeviewItem name='Third-one' subtree>
            <MDBTreeviewItem name='Fourth-one' />
            <MDBTreeviewItem name='Fourth-two' />
            <MDBTreeviewItem name='Fourth-three' />
          </MDBTreeviewItem>
          <MDBTreeviewItem name='Third-two' />
          <MDBTreeviewItem name='Third-three' subtree>
            <MDBTreeviewItem name='Fourth-one' />
            <MDBTreeviewItem name='Fourth-two' />
            <MDBTreeviewItem name='Fourth-three' />
          </MDBTreeviewItem>
        </MDBTreeviewItem>
      </MDBTreeviewItem>
    </MDBTreeview>
  );
}

Disabled - JSX

import React from 'react';
import { MDBTreeview, MDBTreeviewItem } from 'mdb-react-treeview';

export default function App() {
  return (
    <MDBTreeview selectable>
      <MDBTreeviewItem name='One' />
      <MDBTreeviewItem disabled name='Two' />
      <MDBTreeviewItem subtree show name='Three'>
        <MDBTreeviewItem name='Second-one' />
        <MDBTreeviewItem name='Second-two' />
        <MDBTreeviewItem name='Second-three' disabled subtree>
          <MDBTreeviewItem name='Third-one' subtree>
            <MDBTreeviewItem name='Fourth-one' />
            <MDBTreeviewItem name='Fourth-two' />
            <MDBTreeviewItem name='Fourth-three' />
          </MDBTreeviewItem>
          <MDBTreeviewItem name='Third-two' />
          <MDBTreeviewItem name='Third-three' subtree>
            <MDBTreeviewItem name='Fourth-one' />
            <MDBTreeviewItem name='Fourth-two' />
            <MDBTreeviewItem name='Fourth-three' />
          </MDBTreeviewItem>
        </MDBTreeviewItem>
      </MDBTreeviewItem>
    </MDBTreeview>
  );
}

Disabled - JavaScript

To generate a disabled list item, use disabled property.

import React from 'react';
import { MDBTreeview } from 'mdb-react-treeview';

export default function App() {
  return (
    <MDBTreeview
      items={[
        { name: 'One', disabled: true },
        { name: 'Two' },
        {
          name: ' Three',
          show: true,
          children: [
            { name: 'Second-one' },
            { name: 'Second-two' },
            {
              name: ' Second-three',
              disabled: true,
              children: [
                {
                  name: ' Third-one',
                  children: [{ name: 'Fourth-one' }, { name: 'Fourth-two' }, { name: 'Fourth-three' }],
                },
                { name: 'Third-two' },
                {
                  name: ' Third-three',
                  children: [{ name: 'Fourth-one' }, { name: 'Fourth-two' }, { name: 'Fourth-three' }],
                },
              ],
            },
          ],
        },
      ]}
    />
  );
}

Tree view - API

Import

import { MDBTreeview, MDBTreeviewItem } from 'mdb-react-treeview';

Properties

MDBTreeview

Name Type Default Description Example
color string 'primary' Defines a text and background color for an active or hovered item <MDBTreeview color='secondary' />
getSelectedItem (item: React.MutableObjectRef<any>) => void Returns an item after selection <MDBTreeview getSelectedItem={(item: any) => console.log(item)} />
items Record<string,any> [] Defines an array of children to render <MDBTreeview items={childrenArray} />
line boolean false Adds a line to every nested list <MDBTreeview line />
openOnItemClick boolean true Enables opening list by clicking only on the icon <MDBTreeview openOnItemClick={false} />
selectable boolean false Setup checkboxes for the every list item <MDBTreeview selectable />
treeviewRef React.MutableObjectRef<any> A reference for the treeview component <MDBTreeview treeviewRef={someRef} />

MDBTreeviewItem

Name Type Default Description Example
disabled boolean Disables and item (with all children) <MDBTreeviewItem disabled />
icon string 'angle-right' Defines a custom expanding icon for the nested list <MDBTreeviewItem icon='angle-down' />
itemRef React.MutableObjectRef<any> A reference for the item element <MDBTreeviewItem itemRef={someRef} />
name React,ComponentProps<any> '' Defines an item text <MDBTreeviewItem name='One' />
rotationAngle number 90 Defines a rotation angle of the icons in nested lists <MDBTreeviewItem rotationAngle={180} />
show boolean false Defines if list is opened or not by default <MDBTreeviewItem subtree show />
subtree boolean false Declares a subtree item <MDBTreeviewItem subtree />

Events

MDBTreeview

Name Type Description
getSelectedItem (item: React.MutableObjectRef<any>) => void Returns an item after selection