Skip to content
Patternfly Logo

Tree view

Info alert:Beta feature

This Beta component is currently under review and is still open for further evolution. It is available for use in product. Beta components are considered for promotion on a quarterly basis. Please join in and give us your feedback or submit any questions on the PatternFly forum or via Slack. To learn more go to our Beta components page on GitHub.



With checkboxes

With icons

With badges

With custom badges

With action items



Compact, no background

With memoization

Turning on memoization with the useMemo property helps prevent unnecessary re-renders for large data sets. With this flag active, activeItems must pass in an array of nodes along the selected item's path to update properly.



datarequiredTreeViewDataItem[]Data of the tree view
activeItemsTreeViewDataItem[]Active items of tree view
allExpandedbooleanSets the expanded state on all tree nodes, overriding default behavior and current internal state
classNamestringClass to add to add if not passed a parentItem
compareItems(item: TreeViewDataItem, itemToCheck: TreeViewDataItem) => boolean(item, itemToCheck) => === itemToCheck.idComparison function for determining active items
defaultAllExpandedbooleanfalseSets the default expanded behavior
expandedIconReact.ReactNodeIcon for all expanded node items
hasBadgesbooleanfalseFlag indicating if all nodes in the tree view should have badges
hasChecksbooleanfalseFlag indicating if all nodes in the tree view should have checkboxes
hasGuidesbooleanfalseFlag indicating if tree view has guide lines.
iconReact.ReactNodeIcon for all leaf or unexpanded node items
idstringID of the tree view
isNestedbooleanfalseFlag indicating if the tree view is nested
onCheck(event: React.ChangeEvent, item: TreeViewDataItem, parentItem: TreeViewDataItem) => voidCallback for item checkbox selection
onSelect(event: React.MouseEvent, item: TreeViewDataItem, parentItem: TreeViewDataItem) => voidCallback for item selection
parentItemTreeViewDataItemInternal. Parent item of a TreeViewListItem
toolbarReact.ReactNodeToolbar to display above the tree view
useMemobooleanFlag indicating the TreeView should utilize memoization to help render large data sets. Setting this property requires that `activeItems` pass in an array containing every node in the selected item's path.
variant'default' | 'compact' | 'compactNoBackground''default'Variant presentation styles for the tree view.


namerequiredReact.ReactNodeInternal content of a tree view item
actionReact.ReactNodeAction of a tree view item, can be a Button or Dropdown
badgePropsanyAdditional properties of the tree view item badge
checkPropsTreeViewCheckPropsAdditional properties of the tree view item checkbox
childrenTreeViewDataItem[]Child nodes of a tree view item
customBadgeContentReact.ReactNodeOptional prop for custom badge
defaultExpandedbooleanFlag indicating if node is expanded by default
expandedIconReact.ReactNodeExpanded icon of a tree view item
hasBadgebooleanFlag indicating if a tree view item has a badge
hasCheckbooleanFlag indicating if a tree view item has a checkbox
iconReact.ReactNodeDefault icon of a tree view item
idstringID of a tree view item
titleReact.ReactNodeTitle a tree view item. Only used in Compact presentations.


aria-labelstringAccessible label for the search input
classNamestringClasses applied to the wrapper for the search input
idstringId for the search input
namestringName for the search input
onSearch(event: React.ChangeEvent<HTMLInputElement>) => voidCallback for search input

CSS variables

View source on GitHub