vf-tree component

Usage no npm install needed!

<script type="module">
  import visualFrameworkVfTree from 'https://cdn.skypack.dev/@visual-framework/vf-tree';


Tree component

npm version


A collapsable tree list suited for list displays or deep navigation structures.


This repository is distributed with npm. After installing npm, you can install vf-tree with this command.

$ yarn add --dev @visual-framework/vf-tree


There are several paramaters availabl when using the Nunjucks template:

  • expanded: true Control if the entire tree is expanded/collpased
  • sublist if an object of titles the item will be shown as a group
  • artiveTrail: true Highlights a tree as an active path and if it is a sublist, opens it


The source files included are written in [Sass][sass] (scss) Point your sass include-path at your node_modules directory and import it like this.

@import "@visual-framework/vf-tree/index.scss";

Make sure you import Sass requirements along with the modules. You can use a project boilerplate or the vf-sass-starter