Navigations

Quartz bringt eine Navigation mit: den Explorer, einen Ordnerbaum in der Seitenspalte. Mehr nicht. quartz-navigations baut aus derselben Ordnerstruktur jede weitere Navigation, die eine Website braucht — eine Menüleiste im Kopf, ein Akkordeon für den aktuellen Bereich, eine Sitemap in der Fußzeile, „Zurück“ und „Weiter“ unter dem Text. Ein Plugin, beliebig viele Einträge, und jeder wählt selbst, welchen Ausschnitt des Baums er in welcher Form zeigt.

Was es kann

Aus der Ordnerstruktur

Der Baum entsteht beim Bauen aus den Ordnern des Inhalts. Titel kommen aus der index.md eines Ordners oder aus seinem Namen, die Reihenfolge von Hand, alphabetisch oder nach Datum. → 2

Beliebig oft, jede mit ihrem Ausschnitt

Ein Plugin, so viele Einträge, wie die Website braucht. Jeder zeigt die ganze Site, einen Bereich, den aktuellen Ordner oder nur die Geschwister — und so viele Ebenen, wie er soll. → 3

Zehn Varianten

Baum, Akkordeon und Flyout für die Seitenspalte; Leiste, Dropdown, Mega-Menü und Reiter für den Kopf; Spalten für die Fußzeile; ein Sprungmenü und „Zurück / Weiter“ unter dem Text. → 4

Auf dem Smartphone

Jede Navigation entscheidet selbst, was aus ihr unter der Mobil-Grenze wird: Sie bleibt, wird ein Akkordeon, verschwindet hinter einem Burger-Button, wird ein Sprungmenü oder fällt weg. → 6

Ohne JavaScript, und für jeden bedienbar

Die Navigation steht fertig im HTML; ein kleines Skript ergänzt gemerkte Ordner, Menüs beim Überfahren und die Scroll-Sperre hinter einem mobilen Menü. Ganze Zeilen sind Klickfläche, aria-current markiert die Seite, und ein Screenreader hört die Wörter in der Sprache der Seite. → 5, 7.3

Sieht aus wie der Rest der Website

Farben, Schriften und Dunkelmodus kommen vom Theme; jeder Wert ist eine --quartz-nav-*-Variable. Ordner- und Seitensymbole wie in einem Dateimanager, eigene Icons je Seite aus Lucide. → 7

Mit quartz-multilanguage zeigt ein Eintrag auf jeder Seite den Baum ihrer Sprache, gleich wie die Sprachen im Inhalt liegen (8.3).

Diese Website ist ihr eigener Beleg

Sie ist mit dem Plugin gebaut. Das Menü in der linken Spalte, das auf dem Smartphone zur Schublade wird, und „Zurück / Weiter“ unter jedem Text sind zwei Einträge des Plugins. 8.1 zeigt sie und begründet jede Option.

Die neun Kapitel

Kapitel	Die Frage, die es beantwortet
1 – Einstieg	Wozu das Plugin, und wie steht die erste Navigation?
2 – Der Baum	Woher kommen Titel und Reihenfolge, und was fehlt absichtlich?
3 – Der Ausschnitt	Die ganze Site, ein Bereich oder nur der aktuelle Ordner?
4 – Die zehn Varianten	Baum, Leiste, Akkordeon, Menü, Spalten, Pager — welche wofür?
5 – Bedienung	Was passiert beim Klick auf einen Ordner, und was beim Überfahren?
6 – Mobil	Was wird aus einer Menüleiste auf dem Smartphone?
7 – Aussehen	Icons, Farben, Abstände — und wie man sie ändert
8 – Rezepte	Fertige Kombinationen, eine davon auf dieser Seite
9 – Nachschlagen	Alle Optionen, alle Meldungen, alle Grenzen

In einer Minute

npx quartz plugin add github:boxi-os/quartz-navigations

Dann je Navigation ein Eintrag. Dieser setzt die erste Ordnerebene als Leiste in den Kopf:

plugins:
  - source: github:boxi-os/quartz-navigations
    enabled: true
    options:
      variant: bar
      depth: 1
      mobile: offcanvas
    layout:
      position: header
      priority: 20

Ausführlich steht das unter 1.2 – Die erste Navigation.

Wo es sonst noch steht

Die Kurzfassung ist die README des Repositorys. Die Schwesterplugins quartz-layout-box und quartz-multilanguage arbeiten mit diesem zusammen; alle drei gehören zu QuartzControl, nötig ist die App aber nicht.