6.1 – Die fünf Modi

options:
  variant: dropdown
  mobile: offcanvas   # same (Vorgabe) | accordion | offcanvas | select | hidden

mobile	Unterhalb der Mobil-Grenze
same	bleibt, wie sie ist; eine Zeile bricht um
accordion	wird eine gestapelte Liste mit aufklappbaren Ordnern
offcanvas	verschwindet hinter einem Burger-Button und fährt als Panel von links herein
select	wird ein Sprungmenü
hidden	verschwindet

same

Für alles, was ohnehin schmal ist: tree, accordion, pager, select. Für eine waagerechte Leiste nur, wenn sie sehr wenige Einträge hat.

accordion

Aus einer Zeile wird eine Liste untereinander, und Ordner mit Kindern werden aufklappbar. Auf dem Smartphone beginnen sie geschlossen — außer dem Pfad zur aktuellen Seite und dem, was persistState sich gemerkt hat. Auf dem Desktop bleiben sie offen und ihr Titel ein Link; der Aufklapp-Button ist dort unsichtbar.

Passt zu bar, tabs und columns, die sonst keine aufklappbaren Ordner haben, und zu dropdown und mega, deren Menüs auf dem Smartphone in den Fluss der Seite rücken.

Dreht jemand sein Tablet über die Grenze hinweg, folgen die Ordner — sie klappen zu oder auf, ohne dass die Seite neu lädt.

offcanvas

options:
  variant: bar
  depth: 2
  mobile: offcanvas
layout:
  position: header

An der Stelle der Navigation steht ein Burger-Button. Er öffnet ein Panel, das von links hereinfährt, mit einem Schließen-Button oben und einem abgedunkelten Hintergrund dahinter. Im Panel steht die Navigation als gestapelte Liste mit aufklappbaren Ordnern, wie bei accordion.

Geschlossen wird das Panel über den Button, einen Klick auf den Hintergrund, Escape oder einen Seitenwechsel. Solange es offen ist, rollt die Seite dahinter nicht mit.

Das ist die übliche Wahl für die Menüleiste im Kopf.

Nicht in eine Spalte, die ihre Kinder festhält

Das Panel liegt fest über dem Fenster (position: fixed). Ein Vorfahr mit transform, filter oder einer Maske macht aus „über dem Fenster“ „über diesem Vorfahren“ — dann erscheint das Panel zusammengestaucht oder abgeschnitten. Der Kopf einer Quartz-Site ist dafür der sichere Ort; eine rollende Seitenspalte nicht.

Bedienbar ist es auch per Tastatur: Der Schalter hinter dem Burger-Button ist ein Kontrollkästchen, das den Fokus bekommt und seinen Zustand über aria-expanded meldet.

select

Die Liste weicht einem Sprungmenü, wie es variant: select zeigt (4.3): Ordner der ersten Ebene als Gruppen, Ordnerseiten als „Übersicht“. Platzsparender geht es nicht — aber man sieht die Struktur erst, wenn man das Menü öffnet. Braucht JavaScript.

Passt zu einer großen Seitenspalte, die auf dem Smartphone unter dem Text landen würde.

hidden

Die Navigation verschwindet. Richtig, wenn eine andere Navigation auf dem Smartphone ihre Aufgabe übernimmt — etwa eine Seitenspalte mit hidden neben einer Kopfleiste mit offcanvas. Die Kapitelnavigation dieser Website ist hidden; auf dem Smartphone bleibt der Pager unter dem Text.

Quartz’ eigenes display

Quartz kennt im layout-Block display: desktop-only und mobile-only. Das wirkt ähnlich wie mobile: hidden, wird aber von Quartz selbst gesetzt: Die Komponente steckt dann in einem eigenen Behälter, und die Grenze ist Quartz’ eigene. mobile: hidden blendet die Navigation selbst aus und kann eine abweichende Grenze aus breakpoints beachten (6.2).