4.2 – Waagerecht

Die vier waagerechten Varianten legen die erste Ebene in eine Zeile. Sie unterscheiden sich darin, was mit den Ebenen darunter geschieht. In der Zeile selbst stehen keine Glyphen, alle Einträge sind gleich groß.

bar

options:
  variant: bar
  depth: 1

Eine Zeile Links. Mit depth: 1 ist das die klassische Menüleiste. Lässt man tiefere Ebenen zu, stehen sie in derselben Zeile hinter ihrem Ordner, dessen Name dann einen Doppelpunkt bekommt. Das trägt für zwei Ebenen mit wenigen Einträgen, etwa in einer Fußzeile; für mehr gibt es dropdown.

dropdown

options:
  variant: dropdown
  depth: 2
  trigger: click   # oder hover

Die erste Ebene in der Zeile; ein Ordner öffnet ein Menü darunter mit seinen Kindern. Tiefere Ebenen stehen eingerückt im selben Menü. Seiten der ersten Ebene sind gewöhnliche Links.

Ein Menü, das rechts aus dem Fenster ragen würde, hängt das Skript an die rechte Kante seines Eintrags. Öffnet man eines, schließt sich das andere; Escape und ein Klick daneben schließen alle (5.2).

mega

options:
  variant: mega
  depth: 3
  trigger: hover
  folderClick: link

Wie dropdown, aber das Menü ist breit und in Spalten geteilt: Die zweite Ebene bildet die Spaltenköpfe, die dritte steht darunter. Richtig für große Sites mit Bereichen, die jeweils mehrere Unterbereiche haben. Die Breite regelt --quartz-nav-mega-min-width (7.2).

tabs

options:
  variant: tabs
  tabs:
    secondary: true   # Vorgabe

Die erste Ebene als Reiter. Liegt die aktuelle Seite in einem Ordner der ersten Ebene, erscheinen dessen Kinder in einer zweiten Zeile darunter. Mit secondary: false bleibt es bei der Reiterzeile.

Richtig für Sites mit wenigen großen Bereichen, zwischen denen man selten wechselt. showHome gibt es bei tabs nicht — dafür ist in der Reiterzeile kein Platz vorgesehen.

align — die Zeile ausrichten

options:
  align: center   # left (Vorgabe) | center | right | full

Wert	Ergebnis
left	Einträge am Anfang
center	Einträge mittig
right	Einträge am Ende
full	jeder Eintrag bekommt den gleichen Anteil der Breite

Gilt nur für bar, dropdown, mega und tabs; die anderen Varianten übergehen die Option. Mit mobile: accordion oder offcanvas stapeln sich die Einträge unterhalb der Mobil-Grenze, und die Ausrichtung entfällt; mit der Vorgabe mobile: same bricht die Zeile nur um (Kapitel 6).

Welche von den vieren?

Frage	Antwort
Nur die Bereiche, keine Unterseiten?	bar mit depth: 1
Bereiche mit einer Handvoll Seiten?	dropdown
Bereiche mit Unterbereichen?	mega
Wenige Bereiche, und man soll sehen, in welchem man ist?	tabs