Filetree

.Filetree

Filetrees are a good representation of the file system.

The Filetree component goes well together with the AdvancedSelect component, making folder selection more compact.

Example

Markup

<div class="Filetree-folderlist">
    <ul>
        <li class="Filetree-dir Filetree-dir--expanded">
            <a class="Filetree-item Icon Icon--folder" rel="root/" href="javascript:void(0);">root</a>
            <ul style="display: block;" class="Filetree-dirlist">
                <li class="Filetree-dir">
                    <a class="Filetree-item Icon Icon--folder" rel="root/testactive1.org/" href="javascript:void(0);">testactive1.org</a>
                </li>
                <li class="Filetree-dir Filetree-dir--expanded">
                    <a class="Filetree-item Icon Icon--folder" rel="root/lnxtest193.org/" href="javascript:void(0);" style="">lnxtest193.org</a>
                    <ul style="display: block;" class="Filetree-dirlist">
                        <li class="Filetree-dir Filetree-dir--expanded Filetree-dir--selected">
                            <a class="Filetree-item Icon Icon--folder" rel="root/lnxtest193.org/public_html/" href="javascript:void(0);" style="font-weight: bold;">public_html</a>
                        </li>
                        <li class="Filetree-dir">
                            <a class="Filetree-item Icon Icon--folder" rel="root/lnxtest193.org/data/" href="javascript:void(0);">data</a>
                            </li>
                        <li class="Filetree-dir">
                            <a class="Filetree-item Icon Icon--folder" rel="root/lnxtest193.org/logs/" href="javascript:void(0);">logs</a>
                        </li>
                    </ul>
                </li>
                <li class="Filetree-dir">
                    <a class="Filetree-item Icon Icon--folder" rel="root/lnxtest194.org/" href="javascript:void(0);">lnxtest194.org</a>
                </li>
            </ul>
        </li>
    </ul>
</div>