Simple Tree View - Items

Learn how to add simple data to the Tree View component.

Basics

import { SimpleTreeView } from '@mui/x-tree-view/SimpleTreeView';
import { TreeItem } from '@mui/x-tree-view/TreeItem';

SimpleTreeView receives its items directly as JSX children.

Item identifier

Each TreeItem must have a unique itemId. This is used internally to identify the item in various models and to track it across updates.

<SimpleTreeView>
  <TreeItem itemId="item-unique-id" {...otherItemProps} />
</SimpleTreeView>

Item label

You must pass a label prop to each TreeItem, as shown below:

<SimpleTreeView>
  <TreeItem label="Item label" {...otherItemProps} />
</SimpleTreeView>

Disabled items

Use the disabled prop on TreeItem to disable interaction and focus:

Focusable disabled items

The demo below includes a switch that toggles the disabledItemsFocusable prop, which controls whether or not a disabled TreeItem can be focused.

When this prop is set to false:

• Disabled items will not receive focus when navigating with keyboard arrow keys—they next non-disabled item is focused instead.
• Typing the first character of a disabled item's label will not move the focus to it.
• Mouse or keyboard interactions will not expand or collapse disabled items.
• Mouse or keyboard interactions will not select disabled items.
• Shift + arrow keys will skip disabled items, and the next non-disabled item will be selected instead.
• Programmatic focus will not focus disabled items.

When it's set to true:

• Disabled items will receive focus when navigating with keyboard arrow keys.
• Typing the first character of a disabled item's label will move focus to it.
• Mouse or keyboard interactions will not expand or collapse disabled items.
• Mouse or keyboard interactions will not select disabled items.
• Shift + arrow keys will not skip disabled items, but the disabled item will not be selected.
• Programmatic focus will focus disabled items.

Track item clicks

Use the onItemClick prop to track the clicked item:

Imperative API

To use the apiRef object, you need to initialize it using the useSimpleTreeViewApiRef() hook as follows:

const apiRef = useSimpleTreeViewApiRef();

return <SimpleTreeView apiRef={apiRef} items={ITEMS} />;

When your component first renders, apiRef.current is undefined. After the initial render, apiRef holds methods to interact imperatively with the Tree View.

Get an item's DOM element by ID

Use the getItemDOMElement() API method to get an item's DOM element by its ID.

const itemElement = apiRef.current.getItemDOMElement(
  // The id of the item to get the DOM element of
  itemId,
);

API

See the documentation below for a complete reference to all of the props and classes available to the components mentioned here.

• <SimpleTreeView />
• <TreeItem />