x
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
<div class="max-w-sm"> <ul data-controller="midwest-tree-view" role="tree" class="midwest-tree-view"> <li role="treeitem" style="--tree-depth: 0" tabindex="-1" aria-expanded="true" class="midwest-tree-node"> <div class="tree-node-trigger"> <span class="tree-node-chevron" aria-hidden="true" data-action="click->midwest-tree-view#toggle"> <div class="midwest-icon "> <div class="midwest-icon-inner"> <svg xmlns="http://www.w3.org/2000/svg" class="Midwest-Icon__Svg" viewbox="0 0 512 512" focusable="false" role="img" aria-label="Chevron down"><title>Chevron down</title> <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="48" d="M112 184l144 144 144-144"></path></svg> </div> </div> </span> <span class="tree-node-icon" aria-hidden="true"> <div class="midwest-icon "> <div class="midwest-icon-inner"> <svg xmlns="http://www.w3.org/2000/svg" class="Midwest-Icon__Svg" viewbox="0 0 512 512" focusable="false" role="img" aria-label="Folder"><title>Folder</title> <path d="M496 152a56 56 0 00-56-56H220.11a23.89 23.89 0 01-13.31-4L179 73.41A55.77 55.77 0 00147.89 64H72a56 56 0 00-56 56v48a8 8 0 008 8h464a8 8 0 008-8zM16 392a56 56 0 0056 56h368a56 56 0 0056-56V216a8 8 0 00-8-8H24a8 8 0 00-8 8z"></path></svg> </div> </div> </span> <span class="tree-node-label">Documents</span> </div> <ul role="group" class="tree-node-children"> <li role="treeitem" style="--tree-depth: 1" tabindex="-1" class="midwest-tree-node"> <div class="tree-node-trigger"> <span class="tree-node-spacer" aria-hidden="true"></span> <span class="tree-node-icon" aria-hidden="true"> <div class="midwest-icon "> <div class="midwest-icon-inner"> <svg xmlns="http://www.w3.org/2000/svg" class="Midwest-Icon__Svg" viewbox="0 0 512 512" focusable="false" role="img" aria-label="Document"><title>Document</title> <path d="M428 224H288a48 48 0 01-48-48V36a4 4 0 00-4-4h-92a64 64 0 00-64 64v320a64 64 0 0064 64h224a64 64 0 0064-64V228a4 4 0 00-4-4z"></path><path d="M419.22 188.59L275.41 44.78a2 2 0 00-3.41 1.41V176a16 16 0 0016 16h129.81a2 2 0 001.41-3.41z"></path></svg> </div> </div> </span> <span class="tree-node-label">Notes.txt</span> </div> </li> </ul> </li> <li role="treeitem" style="--tree-depth: 0" tabindex="-1" aria-expanded="false" class="midwest-tree-node"> <div class="tree-node-trigger"> <span class="tree-node-chevron" aria-hidden="true" data-action="click->midwest-tree-view#toggle"> <div class="midwest-icon "> <div class="midwest-icon-inner"> <svg xmlns="http://www.w3.org/2000/svg" class="Midwest-Icon__Svg" viewbox="0 0 512 512" focusable="false" role="img" aria-label="Chevron down"><title>Chevron down</title> <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="48" d="M112 184l144 144 144-144"></path></svg> </div> </div> </span> <span class="tree-node-icon" aria-hidden="true"> <div class="midwest-icon "> <div class="midwest-icon-inner"> <svg xmlns="http://www.w3.org/2000/svg" class="Midwest-Icon__Svg" viewbox="0 0 512 512" focusable="false" role="img" aria-label="Folder"><title>Folder</title> <path d="M496 152a56 56 0 00-56-56H220.11a23.89 23.89 0 01-13.31-4L179 73.41A55.77 55.77 0 00147.89 64H72a56 56 0 00-56 56v48a8 8 0 008 8h464a8 8 0 008-8zM16 392a56 56 0 0056 56h368a56 56 0 0056-56V216a8 8 0 00-8-8H24a8 8 0 00-8 8z"></path></svg> </div> </div> </span> <span class="tree-node-label">Empty Folder</span> </div> <ul role="group" class="tree-node-children"> </ul> </li> <li role="treeitem" style="--tree-depth: 0" tabindex="-1" class="midwest-tree-node"> <div class="tree-node-trigger"> <span class="tree-node-spacer" aria-hidden="true"></span> <span class="tree-node-icon" aria-hidden="true"> <div class="midwest-icon "> <div class="midwest-icon-inner"> <svg xmlns="http://www.w3.org/2000/svg" class="Midwest-Icon__Svg" viewbox="0 0 512 512" focusable="false" role="img" aria-label="Document"><title>Document</title> <path d="M428 224H288a48 48 0 01-48-48V36a4 4 0 00-4-4h-92a64 64 0 00-64 64v320a64 64 0 0064 64h224a64 64 0 0064-64V228a4 4 0 00-4-4z"></path><path d="M419.22 188.59L275.41 44.78a2 2 0 00-3.41 1.41V176a16 16 0 0016 16h129.81a2 2 0 001.41-3.41z"></path></svg> </div> </div> </span> <span class="tree-node-label">README.md</span> </div> </li> </ul></div>1
2
3
4
5
6
7
8
9
10
11
12
13
<div class="max-w-sm"> <%= midwest_tree_view do |tree| %> <% tree.with_node("Documents", icon: :folder, expanded: true) do |docs| %> <% docs.with_node("Notes.txt", icon: :document) %> <% end %> <%# `branch: true` forces the chevron + expandable affordance even though this folder has no children yet — e.g. an empty folder you can drop into. %> <% tree.with_node("Empty Folder", icon: :folder, branch: true) %> <% tree.with_node("README.md", icon: :document) %> <% end %></div>Empty Branch
Pass branch: true to force a node to render as an expandable branch
(chevron + child list) even when it has no children — e.g. an empty
folder that can still be expanded or dropped into.
No params configured.
No assets to display.
Add a .js or .css file alongside the component to see it here.
Figma embed for Tree View/empty_branch
Annotate a preview to embed its Figma design here:
@figma "https://figma.com/..."