Tree view

A tree view is a hierarchical list of items that may have a parent-child relationship where children can be toggled into view by expanding or collapsing their parent item.

On this page

Work in progressWe are currently transferring the React documentation for TreeView from a different site to this page. To view the original documentation with code examples, please visit the Primer React documentation for TreeView.

v35.20.0BetaReviewed for accessibility

On this page

Import

import {TreeView} from '@primer/react'

Examples

View in Storybook

Props

TreeView

Name	Default	Description
childrenRequired		`React.ReactNode`

TreeView.Item

Name	Default	Description
childrenRequired		`React.ReactNode`
idRequired		`string` A unique identifier for the item.
current	`false`	`boolean` Indicates whether the item is the current item. No more than one item should be current at once. The path to the current item will be expanded by default.
defaultExpanded		`boolean` The expanded state of the item when it is initially rendered. Use when you do not need to control the state.
expanded		`boolean` The controlled expanded state of item. Must be used in conjunction with onExpandedChange.
containIntrinsicSize		`string` The size of this item's contents. Passing this will set 'content-visiblity: auto' on the content container, delaying rendering until the item is in the viewport.
onExpandedChange		`(expanded: boolean) => void` Event handler called when the expanded state of the item changes.
onSelect		`(event: React.MouseEvent<HTMLElement> \| React.KeyboardEvent<HTMLElement>) => void`
ref		`React.Ref<HTMLElement>`

TreeView.LeadingVisual

Name	Default	Description
childrenRequired		`\| React.ReactNode \| (props: {isExpanded: boolean}) => React.ReactNode)`
label		`string` Provide an accessible label for the visual. This is not necessary for decorative visuals.

TreeView.TrailingVisual

Name	Default	Description
childrenRequired		`\| React.ReactNode \| (props: {isExpanded: boolean}) => React.ReactNode)`
label		`string` Provide an accessible label for the visual. This is not necessary for decorative visuals.

TreeView.DirectoryIcon

Name	Default	Description

TreeView.SubTree

Name	Default	Description
children		`React.ReactNode`
state		`\| 'initial' \| 'loading' \| 'done' \| 'error'` Specify a state if items in the subtree are loaded asynchronously. An asynchronous subtree can be in one of the following states: 'initial', 'loading', 'done', or 'error'. In the 'initial' state, items are neither loaded nor loading. In the 'loading' state, items are loading and the subtree will render a loading indicator. In the 'done' state, items are loaded. Screen readers will announce when a subtree enters the 'done' state. An 'error' state means that an error occured while loading items.
count		`number` The number of items expected to be in the subtree. When in the loading state, the subtree will render a skeleton loading placeholder with the specified count of items

TreeView.ErrorDialog

Name	Default	Description
childrenRequired		`React.ReactNode` The content of the dialog. This is usually a message explaining the error.
title	`'Error'`	`string` The title of the dialog. This is usually a short description of the error.
onRetry		`() => void` Event handler called when the user clicks the retry button.
onDismiss		`() => void` Event handler called when the dialog is dismissed.