svelte-tree-view-component

A beautiful and easy to use Tree View component for Svelte.

REPL Demo

Screenshot:

Install

npm i svelte-tree-view-component

How to use

Basic usage

<TreeView >
    <TreeBranch rootContent="Languages">
        <TreeLeaf>JavaScript</TreeLeaf>
        <TreeLeaf>C#</TreeLeaf>
    </TreeBranch>
    <TreeBranch rootContent="Frameworks">
        <TreeLeaf>Svelte</TreeLeaf>
        <TreeLeaf>React</TreeLeaf>
    </TreeBranch>
</TreeView>

Nested branch

<TreeView >
    <TreeBranch rootContent="Languages">
        <TreeLeaf>JavaScript</TreeLeaf>
        <TreeBranch rootContent="Frameworks">
            <TreeLeaf>Svelte</TreeLeaf>
            <TreeLeaf>React</TreeLeaf>
        </TreeBranch>
    </TreeBranch>
</TreeView>

Customized leaf

<TreeView >
    <TreeBranch rootContent="Languages">
        <TreeLeaf><div style="color:red;">Red</div></TreeLeaf>
    </TreeBranch>
</TreeView>

Customized branch

<TreeView >
    <TreeBranch >
        <div style="color:red;" slot="root">Red</div>
        <svelte:fragment slot="children">
            <TreeLeaf>Svelte</TreeLeaf>
            <TreeLeaf>React</TreeLeaf>
        </svelte:fragment>
    </TreeBranch>
</TreeView>

Change colors/Theme

<TreeView     
    lineColor="#ff0000"
    iconBackgroundColor="#ff0000"
    iconColor="#000000"
    branchHoverColor="#ff0000">
    <TreeBranch rootContent="Languages">
        <TreeLeaf>JavaScript</TreeLeaf>
        <TreeLeaf>C#</TreeLeaf>
    </TreeBranch>
</TreeView>

Reference

• Codepen: Pure CSS Tree Menu