6 Trees

Tree component is used to display and interact with hierarchical information. On Techné this pattern not only display the nodes names but also can have additional information for every item; think of it as a mix between a tree and a table.

The interaction is designed to keep the user focused, highlighting the deepest level of expanded information. Refer to the Tree Starter Page to see an example of the interactivity.

6.1 Tree view on initial load

When loaded, all levels are collapsed and have a light background color, that's where the focus of the user should be at the beginning.

Data Header

Data Header

Data Header

Data Header

Data Header

Data Header

Secondary Value

Data Header

Secondary Value

Inactive

Secondary Value

Secondary Value

Inactive

Data Header

Data Header

Secondary Value

Data Header

Secondary Value

Default

Secondary Value

Secondary Value

Default

Data Header

Data Header

Secondary Value

Data Header

Secondary Value

Default

Secondary Value

Secondary Value

Default

Data Header

Data Header

Secondary Value

Data Header

Secondary Value

Inactive

Secondary Value

Secondary Value

Inactive

Data Header

Data Header

Secondary Value

Data Header

Secondary Value

Default

Secondary Value

Secondary Value

Default

Data Header

Data Header

Secondary Value

Data Header

Secondary Value

Inactive

Secondary Value

Secondary Value

Inactive

6.2 First level expanded

When the user expands one level, the child levels carry the light background color as the upper levels get a slightly darker background color to keep the user focused. The expanded levels also detach of the rest making it, visually, one independent entity.

If more than one level is expanded, the deepest levels tree-wide are highlighted. Not only the recently expanded ones.

Data Header

Data Header

Data Header

Data Header

Data Header

Data Header

Secondary Value

Data Header

Secondary Value

Inactive

Secondary Value

Secondary Value

Inactive

Data Header

Data Header

Secondary Value

Data Header

Secondary Value

Default

Secondary Value

Secondary Value

Default

Data Header

Data Header

Secondary Value

Data Header

Secondary Value

Default

Secondary Value

Secondary Value

Default

Data Header

Data Header

Secondary Value

Data Header

Secondary Value

Inactive

Secondary Value

Secondary Value

Inactive

Data Header

Data Header

Secondary Value

Data Header

Secondary Value

Default

Secondary Value

Secondary Value

Default

Data Header

Data Header

Secondary Value

Data Header

Secondary Value

Inactive

Secondary Value

Secondary Value

Inactive

6.3 Third Level Expanded

Note that as levels go deep in the hierarchy they are indented to the right, but only on the first column.

Again the deepest level is highlighted here.

Data Header

Data Header

Data Header

Data Header

Data Header

Data Header

Secondary Value

Data Header

Secondary Value

Inactive

Secondary Value

Secondary Value

Inactive

Data Header

Data Header

Secondary Value

Data Header

Secondary Value

Default

Secondary Value

Secondary Value

Default

Data Header

Data Header

Secondary Value

Data Header

Secondary Value

Default

Secondary Value

Secondary Value

Default

Data Header

Data Header

Secondary Value

Data Header

Secondary Value

Inactive

Secondary Value

Secondary Value

Inactive

Data Header

Data Header

Secondary Value

Data Header

Secondary Value

Default

Secondary Value

Secondary Value

Default

Data Header

Data Header

Secondary Value

Data Header

Secondary Value

Inactive

Secondary Value

Secondary Value

Inactive

<div class="y-tree">
    <!-- tree header -->
    <div class="y-tree-header">
        <div class="row tree-head hidden-sm hidden-xs">
        <div class="col-sm-4">
            <div class="col-sm-1">
                <a   class="btn btn-link category-toggle expand-collapse-all" 
                     title="Expand All">
                    <span class="hyicon hyicon-chevron"></span>
                </a>
            </div>
            <div class="col-sm-10">Data Header</div>
        </div>
        <div class="col-sm-3">Data Header</div>
        <div class="col-sm-3">Data Header</div>
        </div>
        <div class="row tree-head visible-sm visible-xs">
            <div class="col-xs-1">    
                <a class="btn btn-link category-toggle expand-collapse-all" title="Expand All">
                <span class="hyicon hyicon-chevron"></span>
                </a>
            </div>
            <div class="col-xs-9">Data Header</div>
        </div>
    </div>
    <!-- /tree header -->
    <!-- parent node 1 -->
    <div class="y-tree-row inactive-level">
        <!-- mobile row -->
        <div class="row mobile-layout collapse visible-xs visible-sm">
            <div class="col-xs-1">
                <a   class="btn btn-link category-toggle" 
                      title="Expand">
                <span class="hyicon hyicon-chevron"></span>
                </a>
            </div>
            <div class="col-xs-9">
                <div class="mobile-data">
                    <span class="tree-head">Data Header</span>
                    <p class="primaryData"><a href="">First Level</a></p>
                </div>
                <div class="mobile-data">
                    <span class="tree-head">Data Header</span> 
                    <p>Secondary Value</p>
                </div>
                <div class="mobile-data">
                    <span class="tree-head">Data Header</span> 
                    <p>Secondary Value</p>
                </div>
                <p class="statusDataValue">
                    <span>Inactive</span>
                </p>
            </div>
        </div>
        <!-- /mobile row -->
        <!-- desktop row -->
        <div class="row desktop-layout collapse visible-md visible-lg">
            <div class="col-sm-4">
                <div class="col-sm-1">
                    <a   class="btn btn-link category-toggle" 
                          title="Expand">
                    <span class="hyicon hyicon-chevron"></span>
                    </a>
                </div>
                <div class="col-sm-10">
                    <p class="primaryData"><a href="">First Level</a></p>
                </div>
            </div>
            <div class="col-sm-3">Secondary Value</div>
            <div class="col-sm-3">Secondary Value</div>
            <div class="col-sm-2">
                <span class="statusDataValue">
                 <span>Inactive</span>
                </span>
            </div>
        </div>
        <!-- /desktop row -->
        <!-- Second Level 1 -->
        <div class="y-tree-row child-row active-level--last inactive-level collapse in">
            <!-- child 1.1 -->
            <!-- mobile row -->
            <div class="row mobile-layout visible-xs visible-sm">
                <div class="col-xs-1 col-xs-offset-1">
                    <a class="btn btn-link category-toggle" 
                       title="Expand">
                    <span class="hyicon hyicon-chevron"></span>
                    </a>
                </div>
                <div class="col-xs-8">
                    <div class="mobile-data">
                        <span class="tree-head">Data Header</span>
                        <p class="primaryData"><a href="">Second Level</a></p>
                    </div>
                    <div class="mobile-data">
                        <span class="tree-head">Data Header</span> 
                        <p>Secondary Value</p>
                    </div>
                    <div class="mobile-data">
                        <span class="tree-head">Data Header</span> 
                        <p>Secondary Value</p>
                    </div>
                    <p class="statusDataValue">
                        <span>Default</span>
                    </p>
                </div>
            </div>
            <!-- /mobile row -->
            <!-- desktop row -->
            <div class="row desktop-layout visible-md visible-lg">
                <div class="col-sm-4">
                    <div class="col-sm-1 col-sm-offset-1">
                        <a class="btn btn-link category-toggle" 
                           title="Expand">
                        <span class="hyicon hyicon-chevron"></span>
                        </a>
                    </div>
                    <div class="col-sm-9">
                        <p class="primaryData"><a href="">Second Level</a></p>
                    </div>
                </div>
                <div class="col-sm-3">Secondary Value</div>
                <div class="col-sm-3">Secondary Value</div>
                <div class="col-sm-2">
                    <span class="statusDataValue">
                     <span>Default</span>
                    </span>
                </div>
            </div>
            <!-- /desktop row -->
            <!-- Second Level 1.1 -->
            <div class="y-tree-row child-row inactive-level active-level--last active-level collapse in">
                <!-- child 1.1.1 -->
                <!-- mobile row -->
                <div class="row mobile-layout visible-xs visible-sm">
                    <div class="col-xs-1 col-xs-offset-2">
                    </div>
                    <div class="col-xs-8">
                        <div class="mobile-data">
                            <span class="tree-head">Data Header</span>
                            <p class="primaryData"><a href="">Second Level</a></p>
                        </div>
                        <div class="mobile-data">
                            <span class="tree-head">Data Header</span> 
                            <p>Secondary Value</p>
                        </div>
                        <div class="mobile-data">
                            <span class="tree-head">Data Header</span> 
                            <p>Secondary Value</p>
                        </div>
                        <p class="statusDataValue">
                            <span>Default</span>
                        </p>
                    </div>
                </div>
                <!-- /mobile row -->
                <!-- desktop row -->
                <div class="row desktop-layout visible-md visible-lg">
                    <div class="col-sm-4">
                        <div class="col-sm-1 col-sm-offset-2">
                        </div>
                        <div class="col-sm-8">
                            <p class="primaryData"><a href="">Third Level</a></p>
                        </div>
                    </div>
                    <div class="col-sm-3">Secondary Value</div>
                    <div class="col-sm-3">Secondary Value</div>
                    <div class="col-sm-2">
                        <span class="statusDataValue">
                         <span>Default</span>
                        </span>
                    </div>
                </div>
                <!-- /desktop row -->
                <!-- /child 1.1.1 -->
            </div>
            <!-- /Second Level 1.1 -->
            <!-- /child 1.1 -->
        </div>
        <!-- /Second Level 1 -->
    </div>
    <!-- /parent node 1 -->
    <!-- parent node 2 -->
    <div class="y-tree-row inactive-level">
        <!-- mobile row -->
        <div class="row mobile-layout collapse visible-xs visible-sm">
            <div class="col-xs-1">
                <a class="btn btn-link category-toggle" title="Expand">
                <span class="hyicon hyicon-chevron"></span>
                </a>
            </div>
            <div class="col-xs-9">
                <div class="mobile-data">
                    <span class="tree-head">Data Header</span>
                    <p class="primaryData"><a href="">First Level</a></p>
                </div>
                <div class="mobile-data">
                    <span class="tree-head">Data Header</span> 
                    <p>Secondary Value</p>
                </div>
                <div class="mobile-data">
                    <span class="tree-head">Data Header</span> 
                    <p>Secondary Value</p>
                </div>
                <p class="statusDataValue">
                    <span>Inactive</span>
                </p>
            </div>
        </div>
        <!-- /mobile row -->
        <!-- desktop row -->
        <div class="row desktop-layout collapse visible-md visible-lg">
            <div class="col-sm-4">
                <div class="col-sm-1">
                    <a class="btn btn-link category-toggle"  
                       title="Expand">
                    <span class="hyicon hyicon-chevron"></span>
                    </a>
                </div>
                <div class="col-sm-10">
                    <p class="primaryData"><a href="">First Level</a></p>
                </div>
            </div>
            <div class="col-sm-3">Secondary Value</div>
            <div class="col-sm-3">Secondary Value</div>
            <div class="col-sm-2">
                <span class="statusDataValue">
                 <span>Inactive</span>
                </span>
            </div>
        </div>
        <!-- /desktop row -->
        <!-- Second Level 2 -->
        <div class="y-tree-row child-row active-level--last inactive-level collapse in">
            <!-- child 2.1 -->
            <!-- mobile row -->
            <div class="row mobile-layout visible-xs visible-sm">
                <div class="col-xs-1 col-xs-offset-1">
                </div>
                <div class="col-xs-8">
                    <div class="mobile-data">
                        <span class="tree-head">Data Header</span>
                        <p class="primaryData"><a href="">Second Level</a></p>
                    </div>
                    <div class="mobile-data">
                        <span class="tree-head">Data Header</span> 
                        <p>Secondary Value</p>
                    </div>
                    <div class="mobile-data">
                        <span class="tree-head">Data Header</span> 
                        <p>Secondary Value</p>
                    </div>
                    <p class="statusDataValue">
                        <span>Default</span>
                    </p>
                </div>
            </div>
            <!-- mobile row -->
            <!-- desktop row -->
            <div class="row desktop-layout visible-md visible-lg">
                <div class="col-sm-4">
                    <div class="col-sm-1 col-sm-offset-1">
                    </div>
                    <div class="col-sm-9">
                        <p class="primaryData"><a href="">Second Level</a></p>
                    </div>
                </div>
                <div class="col-sm-3">Secondary Value</div>
                <div class="col-sm-3">Secondary Value</div>
                <div class="col-sm-2">
                    <span class="statusDataValue">
                     <span>Default</span>
                    </span>
                </div>
            </div>
            <!-- /desktop row -->
            <!-- /child 2.1 -->
        </div>
        <!-- /Second Level 2 -->
    </div>
    <!-- /parent node 2 -->
    <!-- parent node 3 -->
    <div class="y-tree-row inactive-level">
        <!-- mobile row -->
        <div class="row mobile-layout collapse visible-xs visible-sm">
            <div class="col-xs-1">
            </div>
            <div class="col-xs-9">
                <div class="mobile-data">
                    <span class="tree-head">Data Header</span>
                    <p class="primaryData"><a href="">First Level</a></p>
                </div>
                <div class="mobile-data">
                    <span class="tree-head">Data Header</span> 
                    <p>Secondary Value</p>
                </div>
                <div class="mobile-data">
                    <span class="tree-head">Data Header</span> 
                    <p>Secondary Value</p>
                </div>
                <p class="statusDataValue">
                    <span>Inactive</span>
                </p>
            </div>
        </div>
        <!-- /mobile row -->
        <!-- dekstop row -->
        <div class="row desktop-layout collapse visible-md visible-lg">
            <div class="col-sm-4">
                <div class="col-sm-1">
                </div>
                <div class="col-sm-10">
                    <p class="primaryData"><a href="">First Level</a></p>
                </div>
            </div>
            <div class="col-sm-3">Secondary Value</div>
            <div class="col-sm-3">Secondary Value</div>
            <div class="col-sm-2">
                <span class="statusDataValue">
                 <span>Inactive</span>
                </span>
            </div>
        </div>
        <!-- desktop row -->
    </div>
    <!-- /node 3 -->
</div>