4.1 – Vertical

The three vertical variants carry a glyph on every row, like a file explorer: a folder, an open folder, a page (7.1). Folder rows get smaller and lighter with each level, so you can find where a branch begins.

tree

options:
  variant: tree

A nested list, everything visible. Nothing expands, nothing opens; a thin line guides the eye down the levels. The current page gets a background colour and an accent bar.

Right when the scope is small — one chapter, one section. The right column of this website is a tree with scope: section.

accordion

options:
  variant: accordion
  expandActive: true         # default: the path to the current page is open
  folderDefaultState: collapsed
  persistState: true         # remember open folders

The same list, but every folder can be expanded. It is built with <details> and <summary> — so it works without JavaScript too. The path to the current page is open, everything else closed until you open it.

Right for a whole site in the sidebar — the obvious replacement for the explorer. What a click on a folder row does, and how to keep only one folder per level open, is in 5.1.

flyout

options:
  variant: flyout
  trigger: hover     # or click (default)
  flyout:
    side: auto       # auto | right | left

A list whose folders do not expand downwards but open a panel beside them — like an operating system menu. Deeper folders open their panel beside again.

Which side: with side: auto the browser decides when opening. If the navigation sits in the right half of the page, the panels open to the left, otherwise to the right. right and left fix it.

Right when a sidebar should stay narrow and the tree is deep.

Panels in a column that scrolls

Sidebars often scroll on their own (overflow: auto) or fade out softly at the bottom. A panel inside would be cut off. The script therefore lifts it out of the column when it opens and anchors it to its row; when the column scrolls, it closes (5.2).

Which of the three?

Question	Answer
Should everything be visible at a glance?	tree
Is the tree large but the column tall?	accordion
Is the column narrow and the tree deep?	flyout