Tree block

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

github location npm version

Usage

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

You can see this component in action in the EMBL-EBI online tutorials, e.g. A guide to bioinformatics.

Variants

Nunjucks syntax

Depending on your environment you'll want to use render or include. As a rule of thumb: server-side use include, precompiled browser use render. If you're using vf-eleventy you should use include.

Using include

You'll need to pass a context object from your code or Yaml file (example), as well as the path to the Nunjucks template. Nunjucks' include is an abstraction of render and provides some additional portability.


{% set context fromYourYamlFile %}
- or -
{% set context = { 
"component-type" : "block",
"tree_example_href" : "JavaScript:Void(0);",
"button_hidden_open_text" : "Open Tree",
"button_hidden_close_text" : "Close Tree",
"expanded" : true,
"vf_tree_list" : [object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],
 }
%}
{% include "../path_to/vf-tree/vf-tree.njk" %}

Using render

This approach is best for bare-bones Nunjucks environments, such as precompiled templates with the Nunjucks slim runtime where include is not be available.


{% render '@vf-tree', {
  "component-type" : "block",
  "tree_example_href" : "JavaScript:Void(0);",
  "button_hidden_open_text" : "Open Tree",
  "button_hidden_close_text" : "Close Tree",
  "expanded" : true,
  "vf_tree_list" : [object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],}
%}
HTML 
<div class="vf-tree" data-vf-js-tree aria-expanded="true" data-vf-js-button-hidden-open-text="Open Tree" data-vf-js-button-hidden-close-text="Close Tree">
  <div class="vf-tree__inner">

    <ul class="vf-tree__list  vf-tree__list--1 | vf-list" aria-role="tree">
      <li class="vf-tree__item" data-vf-js-tree--collapsed="true" data-vf-js-tree aria-role="treeitem" aria-expanded="">
        <a href="JavaScript:Void(0);" class="vf-tree__link">Course Overview </a>
      </li>
      <li class="vf-tree__item" data-vf-js-tree--collapsed="true" data-vf-js-tree aria-role="treeitem" aria-expanded="false">
        <a href="JavaScript:Void(0);" class="vf-tree__link">What is bioinformatics? <button class="vf-button vf-tree__button" data-vf-js-tree--button>
            <p data-vf-js-tree-button-hidden-text class="vf-u-sr-only">
              Open Tree
            </p>
            <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
              <path d="M19.5,12a2.3,2.3,0,0,1-.78,1.729L7.568,23.54a1.847,1.847,0,0,1-2.439-2.773l9.752-8.579a.25.25,0,0,0,0-.376L5.129,3.233A1.847,1.847,0,0,1,7.568.46l11.148,9.808A2.31,2.31,0,0,1,19.5,12Z" />
            </svg>
          </button>
        </a>
        <ul class="vf-tree__list vf-tree__list--additional vf-tree__list--2 | vf-list" aria-role="group">
          <li class="vf-tree__item" data-vf-js-tree--collapsed="true" data-vf-js-tree aria-role="treeitem" aria-expanded="">
            <a href="JavaScript:Void(0);" class="vf-tree__link">Subitems </a>
          </li>
        </ul>

      </li>
      <li class="vf-tree__item" data-vf-js-tree--collapsed="true" data-vf-js-tree aria-role="treeitem" aria-expanded="false">
        <a href="JavaScript:Void(0);" class="vf-tree__link">The role of public databases <button class="vf-button vf-tree__button" data-vf-js-tree--button>
            <p data-vf-js-tree-button-hidden-text class="vf-u-sr-only">
              Open Tree
            </p>
            <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
              <path d="M19.5,12a2.3,2.3,0,0,1-.78,1.729L7.568,23.54a1.847,1.847,0,0,1-2.439-2.773l9.752-8.579a.25.25,0,0,0,0-.376L5.129,3.233A1.847,1.847,0,0,1,7.568.46l11.148,9.808A2.31,2.31,0,0,1,19.5,12Z" />
            </svg>
          </button>
        </a>
        <ul class="vf-tree__list vf-tree__list--additional vf-tree__list--2 | vf-list" aria-role="group">
          <li class="vf-tree__item" data-vf-js-tree--collapsed="true" data-vf-js-tree aria-role="treeitem" aria-expanded="">
            <a href="JavaScript:Void(0);" class="vf-tree__link">Subitems </a>
          </li>
        </ul>

      </li>
      <li class="vf-tree__item vf-tree__item--selected | vf-tree__item--expanded" data-vf-js-tree--collapsed="false" data-vf-js-tree aria-role="treeitem" aria-expanded="true">
        <a href="JavaScript:Void(0);" class="vf-tree__link" aria-current="page">What makes a good bioinformatics database? <button class="vf-button vf-tree__button" data-vf-js-tree--button>
            <p data-vf-js-tree-button-hidden-text class="vf-u-sr-only">
              Open Tree
            </p>
            <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
              <path d="M19.5,12a2.3,2.3,0,0,1-.78,1.729L7.568,23.54a1.847,1.847,0,0,1-2.439-2.773l9.752-8.579a.25.25,0,0,0,0-.376L5.129,3.233A1.847,1.847,0,0,1,7.568.46l11.148,9.808A2.31,2.31,0,0,1,19.5,12Z" />
            </svg>
          </button>
        </a>
        <ul class="vf-tree__list vf-tree__list--additional vf-tree__list--2 | vf-list" aria-role="group">
          <li class="vf-tree__item" data-vf-js-tree--collapsed="true" data-vf-js-tree aria-role="treeitem" aria-expanded="">
            <a href="JavaScript:Void(0);" class="vf-tree__link">Primary and secondary databases </a>
          </li>
          <li class="vf-tree__item" data-vf-js-tree--collapsed="true" data-vf-js-tree aria-role="treeitem" aria-expanded="">
            <a href="JavaScript:Void(0);" class="vf-tree__link">Describing data consistently </a>
          </li>
          <li class="vf-tree__item" data-vf-js-tree--collapsed="true" data-vf-js-tree aria-role="treeitem" aria-expanded="">
            <a href="JavaScript:Void(0);" class="vf-tree__link">Minimum information standards </a>
          </li>
          <li class="vf-tree__item" data-vf-js-tree--collapsed="true" data-vf-js-tree aria-role="treeitem" aria-expanded="">
            <a href="JavaScript:Void(0);" class="vf-tree__link">Controlled vocabularies <button class="vf-button vf-tree__button" data-vf-js-tree--button>
                <p data-vf-js-tree-button-hidden-text class="vf-u-sr-only">
                  Open Tree
                </p>
                <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
                  <path d="M19.5,12a2.3,2.3,0,0,1-.78,1.729L7.568,23.54a1.847,1.847,0,0,1-2.439-2.773l9.752-8.579a.25.25,0,0,0,0-.376L5.129,3.233A1.847,1.847,0,0,1,7.568.46l11.148,9.808A2.31,2.31,0,0,1,19.5,12Z" />
                </svg>
              </button>
            </a>
            <ul class="vf-tree__list vf-tree__list--additional vf-tree__list--3 | vf-list" aria-role="group">
              <li class="vf-tree__item" data-vf-js-tree--collapsed="true" data-vf-js-tree aria-role="treeitem" aria-expanded="">
                <a href="JavaScript:Void(0);" class="vf-tree__link" aria-current="page">Non-heirarchial list </a>
              </li>
              <li class="vf-tree__item" data-vf-js-tree--collapsed="true" data-vf-js-tree aria-role="treeitem" aria-expanded="">
                <a href="JavaScript:Void(0);" class="vf-tree__link">Taxonomy </a>
              </li>
              <li class="vf-tree__item" data-vf-js-tree--collapsed="true" data-vf-js-tree aria-role="treeitem" aria-expanded="">
                <a href="JavaScript:Void(0);" class="vf-tree__link">Thesaurus </a>
              </li>
              <li class="vf-tree__item" data-vf-js-tree--collapsed="true" data-vf-js-tree aria-role="treeitem" aria-expanded="">
                <a href="JavaScript:Void(0);" class="vf-tree__link">Gene Ontology </a>
              </li>
            </ul>

          </li>
        </ul>

      </li>
      <li class="vf-tree__item" data-vf-js-tree--collapsed="true" data-vf-js-tree aria-role="treeitem" aria-expanded="false">
        <a href="JavaScript:Void(0);" class="vf-tree__link">Tips on managing and sharing data? <button class="vf-button vf-tree__button" data-vf-js-tree--button>
            <p data-vf-js-tree-button-hidden-text class="vf-u-sr-only">
              Open Tree
            </p>
            <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
              <path d="M19.5,12a2.3,2.3,0,0,1-.78,1.729L7.568,23.54a1.847,1.847,0,0,1-2.439-2.773l9.752-8.579a.25.25,0,0,0,0-.376L5.129,3.233A1.847,1.847,0,0,1,7.568.46l11.148,9.808A2.31,2.31,0,0,1,19.5,12Z" />
            </svg>
          </button>
        </a>
        <ul class="vf-tree__list vf-tree__list--additional vf-tree__list--2 | vf-list" aria-role="group">
          <li class="vf-tree__item" data-vf-js-tree--collapsed="true" data-vf-js-tree aria-role="treeitem" aria-expanded="">
            <a href="JavaScript:Void(0);" class="vf-tree__link">Subitems </a>
          </li>
        </ul>

      </li>
      <li class="vf-tree__item" data-vf-js-tree--collapsed="true" data-vf-js-tree aria-role="treeitem" aria-expanded="false">
        <a href="JavaScript:Void(0);" class="vf-tree__link">Where do I submit my data? <button class="vf-button vf-tree__button" data-vf-js-tree--button>
            <p data-vf-js-tree-button-hidden-text class="vf-u-sr-only">
              Open Tree
            </p>
            <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
              <path d="M19.5,12a2.3,2.3,0,0,1-.78,1.729L7.568,23.54a1.847,1.847,0,0,1-2.439-2.773l9.752-8.579a.25.25,0,0,0,0-.376L5.129,3.233A1.847,1.847,0,0,1,7.568.46l11.148,9.808A2.31,2.31,0,0,1,19.5,12Z" />
            </svg>
          </button>
        </a>
        <ul class="vf-tree__list vf-tree__list--additional vf-tree__list--2 | vf-list" aria-role="group">
          <li class="vf-tree__item" data-vf-js-tree--collapsed="true" data-vf-js-tree aria-role="treeitem" aria-expanded="">
            <a href="JavaScript:Void(0);" class="vf-tree__link">Subitems </a>
          </li>
        </ul>

      </li>
      <li class="vf-tree__item" data-vf-js-tree--collapsed="true" data-vf-js-tree aria-role="treeitem" aria-expanded="false">
        <a href="JavaScript:Void(0);" class="vf-tree__link">Using ontologies to provide controlled vocabularies <button class="vf-button vf-tree__button" data-vf-js-tree--button>
            <p data-vf-js-tree-button-hidden-text class="vf-u-sr-only">
              Open Tree
            </p>
            <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
              <path d="M19.5,12a2.3,2.3,0,0,1-.78,1.729L7.568,23.54a1.847,1.847,0,0,1-2.439-2.773l9.752-8.579a.25.25,0,0,0,0-.376L5.129,3.233A1.847,1.847,0,0,1,7.568.46l11.148,9.808A2.31,2.31,0,0,1,19.5,12Z" />
            </svg>
          </button>
        </a>
        <ul class="vf-tree__list vf-tree__list--additional vf-tree__list--2 | vf-list" aria-role="group">
          <li class="vf-tree__item" data-vf-js-tree--collapsed="true" data-vf-js-tree aria-role="treeitem" aria-expanded="">
            <a href="JavaScript:Void(0);" class="vf-tree__link">Subitems </a>
          </li>
        </ul>

      </li>
      <li class="vf-tree__item" data-vf-js-tree--collapsed="true" data-vf-js-tree aria-role="treeitem" aria-expanded="false">
        <a href="JavaScript:Void(0);" class="vf-tree__link">Summary <button class="vf-button vf-tree__button" data-vf-js-tree--button>
            <p data-vf-js-tree-button-hidden-text class="vf-u-sr-only">
              Open Tree
            </p>
            <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
              <path d="M19.5,12a2.3,2.3,0,0,1-.78,1.729L7.568,23.54a1.847,1.847,0,0,1-2.439-2.773l9.752-8.579a.25.25,0,0,0,0-.376L5.129,3.233A1.847,1.847,0,0,1,7.568.46l11.148,9.808A2.31,2.31,0,0,1,19.5,12Z" />
            </svg>
          </button>
        </a>
        <ul class="vf-tree__list vf-tree__list--additional vf-tree__list--2 | vf-list" aria-role="group">
          <li class="vf-tree__item" data-vf-js-tree--collapsed="true" data-vf-js-tree aria-role="treeitem" aria-expanded="">
            <a href="JavaScript:Void(0);" class="vf-tree__link">Subitems </a>
          </li>
        </ul>

      </li>
      <li class="vf-tree__item" data-vf-js-tree--collapsed="true" data-vf-js-tree aria-role="treeitem" aria-expanded="false">
        <a href="JavaScript:Void(0);" class="vf-tree__link">Get help and support <button class="vf-button vf-tree__button" data-vf-js-tree--button>
            <p data-vf-js-tree-button-hidden-text class="vf-u-sr-only">
              Open Tree
            </p>
            <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
              <path d="M19.5,12a2.3,2.3,0,0,1-.78,1.729L7.568,23.54a1.847,1.847,0,0,1-2.439-2.773l9.752-8.579a.25.25,0,0,0,0-.376L5.129,3.233A1.847,1.847,0,0,1,7.568.46l11.148,9.808A2.31,2.31,0,0,1,19.5,12Z" />
            </svg>
          </button>
        </a>
        <ul class="vf-tree__list vf-tree__list--additional vf-tree__list--2 | vf-list" aria-role="group">
          <li class="vf-tree__item" data-vf-js-tree--collapsed="true" data-vf-js-tree aria-role="treeitem" aria-expanded="">
            <a href="JavaScript:Void(0);" class="vf-tree__link">Subitems </a>
          </li>
        </ul>

      </li>
    </ul>


  </div>
</div>

Examples

Installation info

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

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

Changelog

Changelog

2.0.0

2.0.0-alpha.1

  • adds focus outline to the svg element

2.0.0-alpha.0

  • makes it cleaner.
  • changes how selected and expanded are styled.
  • makes the text link full width.
  • still allows for the button icon to show/hide.

1.0.2

  • changes any set- style functions to cleaner version

1.0.1

  • JS linting

1.0.0

  • removes right padding on nested list items so arrows align properly

1.0.0-beta.2

  • Added a little specificity to the .vf-show-hide__button and vf-tree__button so that it didn't break. No changes except for when vf-show-hide__button and .vf-tree__button are declared we now have .vf-button.vf-show-hide__button and .vf-button.vf-tree__button

Assets


File system location: components/vf-tree

Find an issue on this page? Propose a change or discuss it.

AI Assistant

Welcome! I'm here to help

Try asking me:

Disclaimer: This chatbot is designed to assist you with general information and basic inquiries. See our disclaimer notes.

Review AI generated content for accuracy. Leave feedback.

Close chat and delete conversation?

Are you sure you want to close the chat?
Your current conversation history will be permanently deleted.