Component

TreeView

Hierarchical tree structure for nested data.

tsx

import { TreeView, FileTree } from 'wss3-forge'

Usage

•

Use for hierarchical data

•

FileTree for file/folder structures

•

Supports expand/collapse

•

Custom icons per node

src

components

Button.tsx

Card.tsx

index.tsx

Examples

File Explorer

src

components

Button.tsx

Card.tsx

index.tsx

package.json

tsx

1<TreeView
2  data={[
3    {
4      id: 'src',
5      label: 'src',
6      icon: <Folder20Regular />,
7      children: [
8        { id: 'components', label: 'components', icon: <Folder20Regular />, children: [
9          { id: 'Button.tsx', label: 'Button.tsx', icon: <DocumentText20Filled /> },
10          { id: 'Card.tsx', label: 'Card.tsx', icon: <DocumentText20Filled /> }
11        ]},
12        { id: 'index.tsx', label: 'index.tsx', icon: <DocumentText20Filled /> }
13      ]
14    },
15    { id: 'package.json', label: 'package.json', icon: <DocumentText20Filled /> }
16  ]}
17  defaultExpanded={['src', 'components']}
18/>

Navigation Menu

Dashboard

Settings

Profile

Security

Notifications

tsx

1<TreeView
2  data={[
3    { id: 'dashboard', label: 'Dashboard' },
4    { id: 'settings', label: 'Settings', children: [
5      { id: 'profile', label: 'Profile' },
6      { id: 'security', label: 'Security' },
7      { id: 'notifications', label: 'Notifications' }
8    ]}
9  ]}
10/>

Previous

Timeline

Next

Banner

Last updated: December 2025

Cookies

We use cookies to improve your experience and save your preferences.