A content tree provides users with a way to navigate nested hierarchical information using a parent-child relationship model. It is located on the left side of the screen and cannot be combined with Side Navigation or Toolbar.
Content tree can be created using the components
TreeView in the root and
TreeViewItem for nodes.
nodeId which should be a unique number and the
label prop to display the node text.
Clicking on collapse/expand button expands or collapse a tree view item and clicking on the node selects it.
TreeView component uses modus icons, refer to Getting Started page on how to enable them.
Tree with Icons
Icons can be configured both at the root level and node level. Also an additional icon can be added to show before the label text using the prop
itemIcon. For more operations, callback functions like
onNodeSelect are available.
sm to shrink the size of Tree and its items.
Add a class of
.list-group-borderless to your Tree view for a borderless variant.
Multi Selection Tree
Use the prop
multiSelectNode to enable multiple selection and the nodes can be selected using
Shift + Arrow Up/Down key or
Ctrl + click.
For displaying checkbox on each node set
checkBoxSelection and to enable multiple selection use
Tree with Actions
Using the props and callback functions from the
TreeView component we can perform more actions as shown in the example below.
Tree with Filter
Below is a sample code for implementing filtering of Tree items based on text search.
Tree with Drag and Drop
The example below shows a sample code for how to implement dragging and dropping of Tree items as a way of reordering. Click and drag the drag icon to reorder Tree items.
Every Tree Item and the elements inside such as drag icon, expand & collapse icon and the checkbox are accessible through keyboard.
Tab key moves focus to the next focusable element and
Shift + Tab moves focus to the previous focusable element. Make sure any element that needs focus has
|Collapses the Tree Node
|Expands the Tree Node
|Moves to the previous focusable Tree Item. Focus moves to a child node if the current or previous parent node is expanded.
|Moves to the next focusable Tree Item. Focus moves to a child node if the current or next parent node is expanded.
|Selects the node if Tree Item is in focus and toggles the expansion state if the focus is on expand/collapse icon.
|Expands/Collapses the Tree Item when it is in focus.
|Shift + Arrow Up/Down
multiSelectNode is true, it performs multiple selection starting from the Tree Item that is selected.
|Ctrl + click on Tree Item
multiSelectNode is true, it performs multiple selection on the clicked Tree Items.
import TreeView from `@trimbleinc/modus-react-bootstrap/TreeView`
Enables checkbox selection on all the Tree items.
Default Collapse icon for all the Tree items including root node.
Tree items expanded by default.
Tree items selected by default (if multiSelect not enabled only the first value is considered).
Default Dragging icon to appear before collapse/expand icon for all the Tree items including root node.
Default Expand icon for all the Tree items including root node.
To expand the Tree items.
A HTML id attribute, necessary for proper form accessibility.
Default icon to appear before the label for all the Tree items including root node.
Enables checkBox selection on multiple Tree items.
Enables selection on multiple Tree items by
An unique numerical id for the root Tree Item, necessary for keyboard navigation
Callback when a Tree item checkbox is selected.
Callback when Tree item(s) selected.
Callback when a Tree item expands or collapse.
To shrink or large the size of Tree and its items
import TreeViewItem from `@trimbleinc/modus-react-bootstrap/TreeViewItem`
Collapse icon for the Tree node.
Disables the Tree node and its children.
Drag icon to appear before collapse/expand icon.
Expand icon for the Tree node.
Icon to appear before the label.
string | element
Tree Item label
An unique numerical id for Tree Item