EXTENDED UI

Treeview

Nested folders, categories and permissions — fully keyboard-driven.
THEME
01

Playground

Selection, lines, icons, counts and density
Spring 27 · files
Spring 2720
Selects6
Day 13
JPGHero 01.jpg0
JPGHero 04.jpg0
JPGHero 07.jpg0
PDFContact sheet.pdf0
PDFBrief.pdf0
PDFContract.pdf0
Nothing selected↑ ↓ ← → · Enter · Space
<TreeView data={files} selection="single" showLines={true} showIcons={true} showCounts={true} density="comfortable" defaultExpanded={["s27", "selects"]} onSelect={id => open(id)} />
Settings
SELECTION
DENSITY
02

Patterns

File manager, search, permissions, drag & drop, lazy loading
File managertree · breadcrumbs · contents
Spring 2720
Double-click a folder to open it.
Searchfilter · auto-expand · highlight
⌕
Try “launch” or “Mira”
Nordic Thread3
Spring 27 campaign0
Fjord winter lookbook0
Store windows0
Permissionsroles × sections · tri-state
SECTIONOwner13 / 13Editor7 / 13Client3 / 13
Clients0
View0
Edit0
Delete0
Projects0
View0
Edit0
Files0
Upload0
Delete0
Invoices0
View0
Create0
Send0
Refund0
Settings0
Team0
Billing0
Owner always has full access. Ticking a parent ticks everything inside it.
Categories · drag & dropmove a branch into a folder
Products0
Prints0
A3 fine art0
A4 matte0
Albums0
Linen0
Leather0
Gift cards0
Services0
Shoots0
Portrait0
Campaign0
Retouch0
Archive0
Empty folder
Drag a row onto a folder
Lazy loadingchildren fetched on expand
“Offline drive” fails first — try Retry.
03

Behaviour

Rename, context menu, remembered state, keyboard
Editable treedouble-click · F2 · right-click
Client gallery3
Selects2
JPGHero 04.jpg0
JPGHero 07.jpg0
PDFRead me.pdf0
Remember expandedsaved per user
Open or close folders in the Playground, then simulate a reload.
Nothing saved yet — toggle a folder
KeyboardWAI-ARIA tree pattern
↑ ↓Previous / next visible item
→Open folder, then go to first child
←Close folder, then go to parent
Home EndFirst / last item
EnterSelect (or tick with checkboxes)
SpaceTick / select
F2Rename (editable tree)
DeleteDelete (editable tree)
04

Rules & a11y

Checklist and Do / Don’t
Checklist
✓role="tree" + treeitemaria-level, aria-expanded on folders, aria-selected / aria-checked
✓One Tab stoproving tabindex; arrows move inside the tree
✓Tri-state parentsaria-checked="mixed" when only some children are ticked
✓Search keeps contextshow matching items with their parents
✓Drag has an alternativeMove… in the menu or cut / paste
✓Lazy folders say sospinner while loading, clear error with Retry
DO✓Keep labels short; show counts on folders✓Open the path to the current item✓Remember what people expanded✓Use indentation of ~18 px per level
DON’T✕Nest deeper than 5–6 levels✕Make the whole row only a toggle✕Hide actions behind right-click only✕Lose selection when a folder collapses