Skip to content
Navigation

Primary

File tree

A tree shows the structure of folders and files with explicit nesting. Choose it when the reader needs to understand where a file is and what is next to it.

Example

content
en
index.md
section.json
assets
logo.svg
docara.json

Markup

Markdown
:::tree
- folder
  - nested file
- file
:::
  • Inside the block is one unordered Markdown list. Nesting is set by an indent of two spaces.
  • An item with a nested list becomes a folder, an item without one a file. You can use code in a label: `index.md`.

The block is built on the SIMAI Framework tree (sf-tree).

Variants

Collapsing folders

By default folders can be collapsed. interactive=false makes the tree static: all folders are always expanded.

content
index.md
docara.json

States

Expanded folders

When the page opens, all folders are expanded, so the whole structure is visible without scripts too. A collapsed folder shows a closed icon.

Accessibility

  • The tree is a tree: Tab moves focus into it, the up and down arrows move between rows, the right arrow expands a folder, the left arrow collapses it, Home and End go to the first and last row.
  • You can also collapse a folder by clicking its icon.
  • The tree explains structure. Do not use it as a navigation menu: the side menu is there for links across the site.

Parameters

Parameter Values Default Sets
interactive true, false true Folders can be collapsed with the mouse and the keyboard. With false the tree is always expanded.

See also