Tree view

A hierarchy the keyboard walks — the ARIA tree: one tab stop, the arrows move and open, a letter jumps, branches load on demand.

WebDeprecatedNavigation

Web only — React, from @krizaka/ui/tree-view. Deprecated: kept for the apps that still use it, removed in its next major.

Why it is here. No product uses it and no planned work needs it: the documentation tree is Fumadocs' and the datasets screens drill down with a list.

DeprecatedSince 3.6.0, removed in 4.0.0. No product uses it and no planned work needs it: the documentation tree is Fumadocs' and the datasets screens drill down with a list. Use instead: List.

When to use

The documentation's sections (krizaka.com/docs).
A studio's datasets, folders of files.

When not to use

For two levels or fewer: a list with headings reads better.Use instead: List
On a phone: drill down screen by screen with a list.Use instead: List

Installation

Install

npm install @krizaka/ui @krizaka/tailwind @krizaka/tokens tailwindcss

Styles

@import "tailwindcss";
@import "@krizaka/tailwind";
@import "@krizaka/ui/tailwind.css";

Import

import { TreeView } from "@krizaka/ui/tree-view";

Examples

Documentation

Products, sections and pages, the current page selected.

Orazaka
- Getting started
- Studios12
  - Dubbing
  - Transcript
  - Clips
- API reference
Orochia
Krizaka UI

Loaded on demand

A branch fetches its files when it opens.

Voices3
Glossaries2
README.md

Props

A hierarchy to browse — documentation sections, a studio's datasets, folders: one tab stop, the arrows walk it (→ opens, ← closes or goes up), Home/End, a letter jumps to the next name; branches can load their children on demand.

Prop	Type	Default	Description
`aria-label`required	`string`	—	The tree's accessible name (“Documentation”).
`nodes`required	`readonly TreeNode[]`	—	The roots.
`className`	`string`	—	Classes merged on the tree.
`defaultExpanded`	`readonly string[]`	`[]`	The ids open at first, uncontrolled.
`defaultSelected`	`string \| null`	`null`	The selected node at first, uncontrolled.
`expanded`	`readonly string[]`	—	The ids of the open branches (controlled).
`loadingLabel`	`string`	`Loading`	The words of a branch that is loading (“Loading”).
`onExpandedChange`	`((expanded: string[]) => void)`	—	Called with the open branches.
`onLoadChildren`	`((node: TreeNode) => void)`	—	Called when a branch with `hasChildren` and no `children` opens: fetch them, then pass them in `nodes`.
`onSelect`	`((node: TreeNode) => void)`	—	Called when a node is chosen (click, Enter or Space): navigate, open the file.
`selected`	`string \| null`	—	The selected node (controlled).

Accessibility

tree, treeitem and group with level, position and size; a loading branch is busy.
Web only: a phone drills down with lists.

Keyboard

Keys	Action
`Arrow Down / Arrow Up`	Move to the next or previous visible node.
`Arrow Right`	Opens a closed branch, or moves to its first child.
`Arrow Left`	Closes an open branch, or moves to its parent.
`Home / End`	Move to the first or last visible node.
`Enter / Space`	Select the node (`onSelect`).
`A letter`	Moves to the next node whose name starts with it.

Best practices

Open the branch of the selected node at first (defaultExpanded).
Load big branches on demand (hasChildren + onLoadChildren).

Generated from the code of @krizaka/ui 3.8.0: its meta.ts, its examples and its types.Edit this documentation on GitHub