TreeFlex 2.0.1

A library for drawing hierarchy trees with CSS
Try it live →

Installation

Treeflex can be installed using yarn or npm by running

yarn install treeflex

OR

npm install treeflex

Treeflex can also be included directly from unpkg.com's CDN.

<link rel="stylesheet" href="https://unpkg.com/treeflex/dist/css/treeflex.css">

Usage

Creating trees with Treeflex is as simple as writing nested HTML lists. Treeflex needs a block-level element with a tf-tree class and an unordered list (ul) as a direct child of the element.

Each li element's first child with a tf-node-content class (or tf-nc for short) is used as that node's content. This is required. You can use whatever tag you like for node content, however it is suggested that you use a span or div element.

Each li element that is not the leaf node should have an unordered list (ul) as its second child. Each li element inside this ul acts as this node's child.

There's no limit on how deep the trees could go. However, every new level adds to the width of the entire tree.

As simple as that!

Examples

Basic tree

A basic hierarchy tree with one root node and two children.
Loading...

Multilevel tree

A hierarchy tree with four levels and multiple children in each node.
Loading...

Scaling

Treeflex styles make use of em units. This allows you to scale the entire tree including the connectors and gaps just by changing the font-size of any or all .tf-tree element(s).
This is good for making the tree responsive. You can simply reduce the font-size of the tree on smaller screens to make it fit in the viewport.

This example shows how you can draw a tiny version of the tree from the above example.
Loading...

Utility Classes


Treeflex comes with a few utility classes to help customize the trees. These are:

tf-nc is just short for tf-node-content. You can use either of these for node content.

tf-gap-* classes go on the tf-tree element. These classes increase and decrease the gap between the nodes.

tf-*-children classes go on li elements. These classes change the connector style to dotted/dashed for all nodes inside the applied li.

Gaps

This example shows the difference between tf-gap-* classes and the default gap.
Loading...

Dashed & dotted connectors

An example of tf-*-children classes. This could be useful for scenarios where one might want to visually represent a node that hasn't been permanently added to the tree yet.
Loading...

Customization


Trees can be customized with your own styles. Here are the classes/elements you need to target to change various aspects of the tree.
For node content related styles, only tf-nc class is used for brevity, these styles can and should be applied to .tf-node-content too if that's what you choose to use.

Styling the nodes

Selector: .tf-tree .tf-nc

This selector can be used to style the look & feel of the nodes.
There are some limitations to this though, you should not change the margins and the pseudo elements (:before, :after) of these elements unless you absolutely know what you're doing. CSS transforms don't work well on these elements either. You can always apply the transforms and other styles to the elements inside though. It's also best to avoid using ul and li elements inside node content.

Changing the font-size of .tf-tree for non scaling related reasons should be avoided as all the gaps and margins are calculated based on that.
To change the font-size of the node content, content should be wrapped inside another element and styles should be applied on that element.

Styling the vertical node connectors

Selector: .tf-tree .tf-nc:before, .tf-tree .tf-nc:after

These selectors can be used to style the vertical node connectors. For instance, you can use these to increase the width or border-style of the connectors.

Styling the horizontal connectors

Selector: .tf-tree li li:before

Same as above but for styling the horizontal connectors.

Customized tree

This example demonstrates how these selectors can be used.
Loading...

Ancestor tree

While ancestor or upside-down trees are not supported out of the box, it can be implemented easily with some custom styles. This example shows how to do that.
Loading...