4.1 – Senkrecht

Die drei senkrechten Varianten tragen an jeder Zeile eine Glyphe wie ein Datei-Explorer: einen Ordner, einen offenen Ordner, eine Seite (7.1). Ordnerzeilen werden je Ebene kleiner und leichter, damit man den Anfang eines Zweigs findet.

tree

options:
  variant: tree

Eine verschachtelte Liste, alles sichtbar. Nichts klappt, nichts öffnet sich; eine feine Linie führt das Auge die Ebenen hinunter. Die aktuelle Seite trägt eine Hintergrundfarbe und einen Akzentbalken.

Richtig, wenn der Ausschnitt klein ist — ein Kapitel, ein Bereich. Die rechte Spalte dieser Website ist ein tree mit scope: section.

accordion

options:
  variant: accordion
  expandActive: true         # Vorgabe: der Pfad zur aktuellen Seite ist offen
  folderDefaultState: collapsed
  persistState: true         # offene Ordner merken

Dieselbe Liste, aber jeder Ordner ist aufklappbar. Gebaut ist das mit <details> und <summary> — es klappt also auch ohne JavaScript. Der Pfad zur aktuellen Seite steht offen, alles andere ist zu, bis man es öffnet.

Richtig für eine ganze Site in der Seitenspalte — der naheliegende Ersatz für den Explorer. Was ein Klick auf eine Ordnerzeile tut, und wie man nur einen Ordner je Ebene offen hält, steht in 5.1.

flyout

options:
  variant: flyout
  trigger: hover     # oder click (Vorgabe)
  flyout:
    side: auto       # auto | right | left

Eine Liste, deren Ordner nicht nach unten aufklappen, sondern ein Panel daneben öffnen — wie das Menü eines Betriebssystems. Tiefere Ordner öffnen ihr Panel wieder daneben.

Wohin: Mit side: auto entscheidet der Browser beim Öffnen. Steht die Navigation in der rechten Hälfte der Seite, öffnen die Panels nach links, sonst nach rechts. right und left legen es fest.

Richtig, wenn eine Seitenspalte schmal bleiben soll und der Baum tief ist.

Panels in einer Spalte, die rollt

Seitenspalten rollen oft für sich (overflow: auto) oder blenden unten weich aus. Ein Panel darin würde abgeschnitten. Das Skript hebt es deshalb beim Öffnen aus der Spalte heraus und verankert es an seiner Zeile; rollt die Spalte, schließt es sich (5.2).

Welche von den dreien?

Frage	Antwort
Soll man alles auf einen Blick sehen?	tree
Ist der Baum groß, aber die Spalte hoch?	accordion
Ist die Spalte schmal und der Baum tief?	flyout