Folder Tree Nav
Recursive folder tree sidebar with expand chevrons, item counts, one active node, and Trash and Shared rows.
Recursive folder tree sidebar with expand chevrons, item counts, one active node, and Trash and Shared rows.
Search blocks by description or jump to a page.
The source for every Application block is included with Basic and Pro. Pick a plan to copy the code.
Already purchased? Log in
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.
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
After
One strong use is the file manager sidebar. Other tree nav shapes:
Tip: item counts per folder earn their column, they let users know whether a folder is worth opening before they click.