Skip to main content

TreeView

TreeView displays hierarchical data in a collapsible, keyboard-navigable tree structure. It is ideal for file explorers, navigation panels, and any nested data visualization.

Usage​

Basic usage​

import { TreeView } from '@nofinite/nui';

<TreeView data={data} />;

With selection handling​

<TreeView
  data={data}
  selectedId="node-id"
  onSelect={(id) => console.log('Selected:', id)}
/>

Variants​

This component does not provide visual variants. Styling is controlled via CSS and className.

Sizes​

TreeView does not have predefined size props. Indentation and spacing are handled internally based on tree depth.

You can control sizing via CSS:

<TreeView className="my-treeview" />

States​

TreeView supports the following interaction states:

<TreeView selectedId="some-id" />
  • Selected: Highlights the selected node.
  • Active (keyboard focus): Shows an outline for the currently focused node during keyboard navigation.
  • Expanded / Collapsed: Nodes with children can be toggled open or closed.

Native Props / Composition​

TreeView accepts a className for styling and forwards interaction through callbacks.

<TreeView className="custom-tree" onSelect={(id) => handleSelect(id)} />

Props​

PropTypeDefaultDescription
dataTreeNode[]—Hierarchical tree data to render
selectedIdstring—Currently selected node id (controlled)
onSelect(id: string) => void—Callback fired when a node is selected
classNamestring""Additional class names for custom styling

TreeNode shape​

interface TreeNode {
  id: string;
  label: string;
  icon?: React.ReactNode;
  children?: TreeNode[];
}

Behavior Notes​

  • Supports controlled selection via selectedId and onSelect.
  • Expanded/collapsed state is managed internally.
  • Clicking a node with children toggles expansion.
  • Keyboard navigation follows ARIA TreeView guidelines.

Example:

<TreeView data={data} selectedId={activeId} onSelect={setActiveId} />

Accessibility​

  • Renders with role="tree" and role="treeitem".

  • Child groups use role="group".

  • Keyboard support:

    • Arrow Up / Down: Move between visible nodes
    • Arrow Right: Expand node or move to first child
    • Arrow Left: Collapse node or move to parent
    • Enter / Space: Select node

  • aria-expanded is applied to expandable nodes.

Layout​

  • Full-width by default.
  • Indentation is based on tree depth.
  • Designed to be placed inside sidebars, panels, or flexible layouts.
<TreeView style={{ width: '100%' }} data={data} />

Best Practices​

Do​

  • Use meaningful icons for files and folders.
  • Keep node labels short and readable.
  • Control selection externally when syncing with other UI.

Don’t​

  • Overload nodes with heavy interactive content.
  • Nest extremely deep trees without visual grouping.
  • Use TreeView for flat or non-hierarchical data.