Tree navigator

Explore and select a nested hierarchy with guide lines, independent disclosure, and complete keyboard navigation.

New

Project files

Select a file or expand a folder.

src
- components3
  - Button.tsxTSX
  - TreeNavigator.tsxTSX
  - Tabs.tsxTSX
- styles
- index.tsTS
public
README.mdMD
Archive

Selected: TreeNavigator.tsx

Use ↑ ↓ to move, ← → to expand, and Enter to select.

Implementation

1"use client";2 3import {4  useLayoutEffect,5  useId,6  useMemo,7  useRef,8  useState,9  type HTMLAttributes,10  type KeyboardEvent,11  type ReactNode,12} from "react";13import { ChevronRight, File, Folder, FolderOpen } from "lucide-react";14 15export type TreeNavigatorNode = {16  /** Unique across the entire hierarchy and stable between renders. */17  id: string;18  label: string;19  children?: readonly TreeNavigatorNode[];20  /** Decorative leading content; folders and files have defaults. */21  icon?: ReactNode;22  /** Noninteractive supporting content, such as a count or file extension. */23  meta?: ReactNode;24  /** Disables the item and its descendants. */25  disabled?: boolean;26};27 28export type TreeNavigatorProps = Omit<