On this page
Overview
Show code, FileTree.tsx
Variants
Density
Density changes only the room around a row's text, never the text or the icons.
- Extra small
The densest lists.
- Small
Dense desktop interfaces, such as files. The default.
- Medium
Fewer rows with more room, such as mailboxes.
- Large
The most room, as tall as a touch target.
Counts at the end, a description and a disabled row, at each density.
Show code, RowDensity.tsx
Anatomy
Tree
Row
Chevron
Icon
Label
End
Description
Show code, TreeAnatomy.tsx
Behaviour
Opening and previewing
A click and Space preview a row, and a double click and Enter open it to keep, as an editor previews a file in a tab before keeping it.
- A disabled row can be reached with the keyboard, but doesn't open or expand.
Actions in a context menu
A right click, a long press, Shift+F10 or the Menu key open a menu for a row, or for the empty area. Offer the same actions in visible controls.
Show code, ContextMenuActions.tsx
Thousands of rows
The tree draws only the rows in view, so it stays quick with tens of thousands of rows.
- It is as tall as the space it is given, and scrolls itself.
Adapting to width
Rows keep one line: the description gives way first, then the label ends with an ellipsis.
Show code, NarrowTree.tsx
Rules
A row is one item of the hierarchy, and its actions live outside it.
Use it when
- A hierarchy people expand and collapse, such as folders and files
- Thousands of rows, such as a large project's files
- Rows previewed with a click and opened to keep with a double click
Controls in rows
Keep buttons, links and fields out of rows: their actions go in the context menu and a toolbar.
Accessibility
| Key | Action |
|---|---|
| Tab, Shift+Tab | Moves focus to and from the tree, one tab stop. |
| ↓, ↑ | Moves to the next or previous row. |
| Home, End | Moves to the first or last row. |
| Page Down, Page Up | Moves by the rows that fit in view, less one. |
| → | Expands a row, or moves to its first child. ← in right-to-left text. |
| ← | Collapses a row, or moves to its parent. → in right-to-left text. |
| Enter | Opens the active row. |
| Space | Previews the active row. |
| A letter or digit | Moves to the next row whose label starts with what was typed. |
| Shift+F10 or Menu | Opens the context menu; Esc closes it and returns focus to the tree. |
| Keys with Alt, Ctrl or ⌘ | Left to the application. |