TreeView
A hierarchy such as files or nested sections, with a folder icon that opens, badges and row actions. Pick it when depth matters; use List for flat records.
- TreeView
- TreeRow
PreviewLink to the section Preview
Live in all three themes. Everything here is interactive.
Light theme, TreeView
src
actions
data
README.md
a-file-with-a-very-long-name-that-is-cut-to-one-line.config.ts
Guides
Getting started
DeployingDraft
Changelog
Dark theme, TreeView
src
actions
data
README.md
a-file-with-a-very-long-name-that-is-cut-to-one-line.config.ts
Guides
Getting started
DeployingDraft
Changelog
High contrast theme, TreeView
src
actions
data
README.md
a-file-with-a-very-long-name-that-is-cut-to-one-line.config.ts
Guides
Getting started
DeployingDraft
Changelog
UsageLink to the section Usage
import { TreeView, TreeRow } from '@skribly/ui/data'<TreeView aria-label="Files" selectionMode="single">
<TreeRow id="src" title="src" icon={<Folder aria-hidden="true" />} expandedIcon={<FolderOpen aria-hidden="true" />}>
<TreeRow id="index" title="index.ts" meta={<Badge tone="warn">Modified</Badge>} />
</TreeRow>
</TreeView>Every label is a prop, so the app passes its own words in its own language. See no built-in text.
AccessibilityLink to the section Accessibility
- A treegrid with aria-level and aria-expanded on every row.
- Up and Down move, Right opens a branch or moves into it, Left closes it or returns to the parent, typing jumps to a row, and Enter or Space selects.
- The chevron has a localised Expand or Collapse name from React Aria and points the other way in right-to-left text.
- Indentation stops growing after eight levels so deep trees fit a phone.
This demo runs through axe in all three themes on every test run. See what the tests check.