List tree

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.

View example of the list tree pattern


For more information view the list tree design spec which includes the specification in markdown format and a PNG image.

For alternative list style layouts view our range of list components.