Bootstrap UI Kit

Basic Collapsible File Tree

src

components

Button.vue

Card.vue

App.vue

<div class="uk-tree">
    <div class="uk-tree-item uk-tree-toggle">
        <i class="fas fa-chevron-down uk-tree-arrow"></i>
        <i class="fas fa-folder uk-tree-icon"></i> src
    </div>
    <div class="uk-tree-children">
        <div class="uk-tree-item uk-tree-file">
            <i class="fas fa-file-code uk-tree-icon"></i> App.vue
        </div>
    </div>
</div>

<style>
    .uk-tree { font-size: 0.9rem; color: #334155; }
    .uk-tree-item {
        display: flex; align-items: center; gap: 0.5rem;
        padding: 0.3rem 0; cursor: pointer; font-weight: 500;
    }
    .uk-tree-item:hover { color: #0f172a; }
    .uk-tree-arrow { font-size: 0.65rem; color: #94a3b8; width: 12px; transition: transform 0.2s; }
    .uk-tree-icon { width: 16px; text-align: center; }
    .uk-tree-children { padding-left: 1.5rem; border-left: 1px solid #e2e8f0; margin-left: 0.3rem; }
    .uk-tree-file { padding-left: 1.25rem; }
</style>

<script>
    // Toggle logic
    document.querySelectorAll('.uk-tree-toggle').forEach(item => {
        item.addEventListener('click', () => {
            const children = item.nextElementSibling;
            const arrow = item.querySelector('.uk-tree-arrow');
            if (children && children.classList.contains('uk-tree-children')) {
                children.style.display = children.style.display === 'none' ? 'block' : 'none';
                arrow.style.transform = children.style.display === 'none' ? 'rotate(-90deg)' : 'rotate(0deg)';
            }
        });
    });
</script>

Directory Tree with Checkboxes

Documents

Report.pdf

Draft.docx

<div class="uk-tree">
    <div class="uk-tree-item">
        <input type="checkbox" class="uk-tree-checkbox">
        <i class="fas fa-folder uk-tree-icon"></i> Documents
    </div>
    <div class="uk-tree-children">
        <div class="uk-tree-item">
            <input type="checkbox" class="uk-tree-checkbox">
            <i class="fas fa-file-pdf uk-tree-icon"></i> Report.pdf
        </div>
    </div>
</div>

<style>
    .uk-tree { font-size: 0.9rem; color: #334155; }
    .uk-tree-item {
        display: flex; align-items: center; gap: 0.5rem;
        padding: 0.3rem 0; cursor: pointer; font-weight: 500;
    }
    .uk-tree-checkbox {
        width: 14px; height: 14px; accent-color: #1e3a8a; cursor: pointer;
    }
    .uk-tree-icon { width: 16px; text-align: center; }
    .uk-tree-children { padding-left: 1.5rem; border-left: 1px solid #e2e8f0; margin-left: 0.3rem; }
</style>

Sidebar Navigation Tree

UI Components

Buttons

Forms

Cards

<div class="uk-tree uk-tree-nav">
    <div class="uk-tree-item uk-tree-toggle uk-tree-nav-active">
        <i class="fas fa-chevron-down uk-tree-arrow"></i>
        <i class="fas fa-layer-group uk-tree-icon"></i> UI Components
    </div>
    <div class="uk-tree-children">
        <div class="uk-tree-item uk-tree-nav-link">Buttons</div>
        <div class="uk-tree-item uk-tree-nav-link">Forms</div>
    </div>
</div>

<style>
    .uk-tree { font-size: 0.9rem; color: #334155; }
    .uk-tree-item {
        display: flex; align-items: center; gap: 0.5rem;
        padding: 0.4rem 0.5rem; cursor: pointer; font-weight: 500;
        border-radius: 0.35rem; transition: background 0.15s;
    }
    .uk-tree-item:hover { background: #f8fafc; }
    .uk-tree-nav-active { background: #eef2f8; color: #1e3a8a; }
    .uk-tree-arrow { font-size: 0.65rem; color: #94a3b8; width: 12px; }
    .uk-tree-icon { width: 16px; text-align: center; }
    .uk-tree-children { padding-left: 1.5rem; }
    .uk-tree-nav-link { font-size: 0.85rem; color: #64748b; }
    .uk-tree-nav-link:hover { color: #1e3a8a; }
</style>

Deeply Nested Tree

Level 1

Level 2

Level 3

Level 4 Leaf Node

<div class="uk-tree">
    <div class="uk-tree-item">Level 1</div>
    <div class="uk-tree-children">
        <div class="uk-tree-item">Level 2</div>
        <div class="uk-tree-children">
            <div class="uk-tree-item">Level 3</div>
        </div>
    </div>
</div>

<style>
    .uk-tree { font-size: 0.9rem; color: #334155; }
    .uk-tree-item {
        display: flex; align-items: center; gap: 0.5rem;
        padding: 0.3rem 0; font-weight: 500;
    }
    .uk-tree-children { padding-left: 1.5rem; border-left: 1px solid #e2e8f0; margin-left: 0.3rem; }
</style>

CSS Connecting Lines Tree

src
- App.vue
- components
  - Header.vue
  - Footer.vue

<div class="uk-tree-lines">
    <ul>
        <li>
            <span>src</span>
            <ul>
                <li><span>App.vue</span></li>
                <li>
                    <span>components</span>
                    <ul>
                        <li><span>Header.vue</span></li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>
</div>

<style>
    .uk-tree-lines ul {
        list-style: none; padding-left: 20px; margin: 0;
        position: relative;
    }
    .uk-tree-lines li {
        position: relative; padding-left: 15px; line-height: 1.8;
    }
    /* Vertical line */
    .uk-tree-lines li::before {
        content: ''; position: absolute; left: 0; top: 0; bottom: 0;
        border-left: 1px solid #cbd5e1;
    }
    /* Horizontal line */
    .uk-tree-lines li::after {
        content: ''; position: absolute; left: 0; top: 0.9em;
        width: 10px; border-top: 1px solid #cbd5e1;
    }
    /* Remove lines for the root item */
    .uk-tree-lines > ul > li::before,
    .uk-tree-lines > ul > li::after {
        display: none;
    }
    .uk-tree-lines > ul { padding-left: 0; }
    .uk-tree-lines > ul > li { padding-left: 0; }
</style>

Tree Views