The list tree pattern can be used to show a directory style listing, such as a list of files and folders within a directory.
Each directory can be opened or collapse using aria-hidden, set true for open and false to close on the nested list. Using JS this can be changed and should also update the aria-expanded attribute on the folder element.
In the legacy version of the list tree, leaf nodes are not all links, the .p-list-tree__link class is not used for
leaf node styling, and the .is-active state is not applied to active tree nodes.
To import just this component into your project, copy the snippet below and include it in your main Sass file.
// import Vanilla and include base mixins
// this only needs to happen once in a given project
@import 'vanilla-framework';
@include vf-base;
@include vf-p-list-tree;
For more information see Customising Vanilla in your projects, which includes overrides and importing instructions.
For alternative list style layouts view our range of list components.