About this block

Folder Tree Nav is the sidebar navigation panel for a file manager, a recursive tree rooted at Acme (312 items) with the Design branch expanded to show Q1 Assets (34), Q2 Assets (41, active), and Brand Kit (12), then Engineering (95) and Marketing (130) as collapsed siblings. Expand chevrons flip to a down arrow on open nodes, the folder icon switches to FolderOpen, and the active row gets an accent background. Below a divider, three special rows handle Shared with me (18), Shared by me (6), and Trash (43).

The tree is one recursive FolderNode array rendered by a FolderRow component. Depth-based paddingLeft creates the indent rail without a CSS tree library. Static expanded state means no JS needed for the preview.

When to use

Reach for this block as the left column of a file manager layout, wired to your directory tree API and a router that sets the active node by path. Add onClick handlers when the static blueprint goes live.

A natural flow around it on an Application Pro page:

Before

• App shell

After

• File browser table
• File grid gallery

What you can display

One strong use is the file manager sidebar. Other tree nav shapes:

• Project tree. Rename the root to a project name and replace file counts with open task counts.
• Settings nav. A flat two-level tree where top nodes are categories and children are individual settings pages.
• Category browser. An e-commerce or docs taxonomy rendered with the same expand and active patterns.

Tip: item counts per folder earn their column, they let users know whether a folder is worth opening before they click.