08b — Die Seite Navigation
13 Felder in vier Reitern. Welche Navigation verwendet wird, wie sie sich verhält, wie groß sie ist und was sonst noch in der Leiste liegt.
Bislang war das zweigeteilt: Höhen und Rundung lagen auf der Seite Layout, Variante und Schalter auf der Seite Config — und beide Reiter hießen Navigation. Unabhängig waren sie ebenfalls nicht: Der Schalter, der den Header schrumpfen lässt, lag auf der einen Seite, die Höhe, auf die er schrumpft, auf der anderen. Jetzt sind sie eine Seite.
Das Logo ist die Ausnahme und bleibt auf 08 — Layout, im Reiter Logo: Ein Logo ist ein Logo, ob es nun in der Navigation, im Footer oder in einem Suchergebnis steht.
Reiter: Variants (3 Felder)
| Feld | Bedeutung |
|---|---|
| Navigation Art Desktop | Welche Desktop-Navigation verwendet wird, ab 992px |
| Navigation Art Mobile | Welche mobile Navigation verwendet wird, unter 992px |
| Hamburger Overlay Brand Label | Kleine Versalien-Beschriftung über dem Adressblock im Hamburger-Overlay. Leer blendet sie aus. |
Desktop:
| Wert | Charakter |
|---|---|
MainNavigation | Die Vorgabe: klassische Leiste mit Dropdowns und Megamenü |
SplitedNavigation | Menü links und rechts eines mittigen Logos geteilt |
HamburgerNavigation | Nur Hamburger, Vollbild-Overlay |
HamburgerD2 | Hamburger, typografische Bühne |
HamburgerD3 | Hamburger, Index-Leiste |
Mobil:
| Wert | Charakter |
|---|---|
BottomSheetNavigation | Die Vorgabe: Blatt, das von unten hereinfährt |
OrbitFabNavigation | Schwebende Aktionsschaltfläche mit einem Orbit aus Einträgen |
NavigationN4 | Split Reveal |
Was jede von ihnen im Frontend tut, steht in 14 — Navigation.
Reiter: Behaviour (3 Felder)
| Feld | Bedeutung |
|---|---|
| Fixed Navigation | Der Header bleibt beim Scrollen sichtbar. Vorgabe ein. |
| Fixed Navigation Transition | Der Header schrumpft, sobald gescrollt wurde. Gehört zum fixierten Header. |
| Wide Navigation | Die Navigation nutzt die volle Fensterbreite statt des zentrierten Containers. Betrifft nur die Navigationszeile. |
Fixed Navigation Transition ist der Schalter, nicht die Größe. Worauf der Header schrumpft, ist Navbar height (scrolled) im nächsten Reiter, und worauf das Logo schrumpft, ist Logo height (scrolled) auf der Seite Layout unter Logo. Ist der Schalter aus, tun beide Felder nichts.
Reiter: Sizes & rounding (4 Felder)
| Feld | Bedeutung |
|---|---|
| Navbar height | Header-Höhe am Seitenanfang, z. B. 165px |
| Navbar height (scrolled) | Header-Höhe nach dem Scrollen — der geschrumpfte Zustand |
| Dropdown & mega menu rounding | Eckenradius von allem, was sich aus der Navigation heraus öffnet: die Panels von Dropdown und Megamenü, jeder Eintrag darin, die Link- und Vorschaukacheln sowie das Sprachmenü |
| Navigation buttons & pills rounding | Eckenradius der Bedienelemente in der Leiste: Navigationslinks samt ihrem aktiven Hintergrund, die Sprach-Pille und der hervorgehobene Button |
Die beiden Rundungsfelder teilen die Navigation entlang einer Linie, die man sich leicht merkt: in der Leiste → Buttons-Feld, im geöffneten Menü → Menü-Feld. Beide nehmen eine Länge (12px) entgegen; eine nackte Zahl wird als Pixel gelesen.
Reiter: Language & search (3 Felder)
| Feld | Bedeutung |
|---|---|
| Language switcher in the navigation | Zeigt die Sprachlinks. Jede Variante rendert sie. |
| Search in the navigation | Zeigt eine Lupe, die ein Suchfeld öffnet |
| Search results page | Seiten-ID, an die die Suche abschickt |
Auf einer einsprachigen Site den Sprachumschalter ausschalten — er zeigte sonst einen einsamen Eintrag, der nichts bewirkt. Die Einstellung gehört zum Bootstrap Package und ist hier nur wiederholt, damit sie in diesem Modul auftaucht; sie an der einen oder der anderen Stelle auszuschalten hat dieselbe Wirkung.
Das Theme stellt die Suchoberfläche bereit, nicht die Suchmaschine. Das Formular schickt per GET an die Seite ab, die als Search results page gesetzt ist, und diese Seite braucht ein Such-Plugin (Indexed Search, Solr, …). Ohne Zielseite geht die Anfrage an die aktuelle Seite — das leiseste denkbare Scheitern: kein 404, keine Ausnahme, nur keine Treffer. Die Seite setzen.
Jedes Feld ist mit seinem Einstellungsschlüssel in der Referenz der Einstellungen aufgeführt.