14 — Navigation
Fünf Desktop-Varianten, drei mobile, je Site gewählt. Nur das ausgewählte Paar wird ins Stylesheet kompiliert.
Eine Variante wählen
Yavi Theme → Navigation → Variants — jede in diesem Kapitel genannte Einstellung liegt auf dieser einen Seite, siehe 08b — Die Seite Navigation:
| Einstellung | Werte |
|---|---|
| Navigation Art Desktop | MainNavigation · SplitedNavigation · HamburgerNavigation · HamburgerD2 · HamburgerD3 |
| Navigation Art Mobile | BottomSheetNavigation · OrbitFabNavigation · NavigationN4 |
Der Breakpoint zwischen Desktop und Mobil liegt bei 992px.
Die Desktop-Varianten
| Variante | Charakter | Passt zu |
|---|---|---|
| MainNavigation | Klassische Leiste: Logo links, Menü rechts, Dropdowns und Megamenü | den meisten Business-Sites |
| SplitedNavigation | Menü um ein mittiges Logo herum geteilt | Marken, deren Logo der Anker ist |
| HamburgerNavigation | Nur Hamburger, Vollbild-Overlay | Portfolio- und Kampagnenseiten |
| HamburgerD2 | Hamburger mit typografischer Bühne | redaktionellen Sites |
| HamburgerD3 | Hamburger mit Index-Leiste | Sites mit wenigen, starken Bereichen |
Die mobilen Varianten
| Variante | Charakter |
|---|---|
| BottomSheetNavigation | Ein Blatt, das von unten hereinfährt — daumenfreundlich |
| OrbitFabNavigation | Schwebende Aktionsschaltfläche mit ringsum angeordneten Einträgen |
| NavigationN4 | Split Reveal |
Megamenü
Verfügbar in MainNavigation und SplitedNavigation. Je Seite, in den Seiteneigenschaften:
| Feld | Was es tut |
|---|---|
| Megamenü | Schaltet das Megamenü für den Unterbaum dieser Seite ein |
| Spalten im Megamenü | Automatisch (2, ab 10 Einträgen 3), 2 oder 3 |
| Vorschaubild im Megamenü | Vorschaubild im Panel |
| Titel im Megamenü / Text im Megamenü | Teasertext im Panel |
| Link im Megamenü | Der eigene Link des Panels |
Hervorgehobener Menüpunkt
Eine Seite kann in der Navigation als Button erscheinen — Seiteneigenschaften → Menüpunkt als Button. Für einen Eintrag verwenden, nicht für fünf.
Größen und Formen
Die Proportionen liegen unter Yavi Theme → Navigation → Sizes & rounding:
| Feld | Bedeutung |
|---|---|
| Navbar height | Header-Höhe am Seitenanfang |
| Navbar height (scrolled) | Höhe nach dem Scrollen |
| Dropdown & mega menu rounding | Ecken von allem, was sich aus der Leiste heraus öffnet |
| Navigation buttons & pills rounding | Ecken der Bedienelemente in der Leiste |
Die Verhaltensschalter liegen einen Reiter weiter links, unter Behaviour: fixierter Header, Schrumpfen beim Scrollen, Navigation über die volle Breite.
Die Logohöhen sind das Einzige, was nicht hier steht — sie liegen unter Layout → Logo, zusammen mit den Logodateien und den Footer-Größen.
Was mit dem Theme reist
Die acht Varianten liegen in yavi_core und werden über einen interpolierten Pfad eingebunden (Skin/Navigation/#{$navigationart}). Ein Theme kann eine Variantendatei daher nicht besitzen — stattdessen formt es die Navigation über:
- Navigations-Tokens —
--nav-menu-bg,--nav-menu-fg,--nav-link-…,--nav-pill-radius,--nav-panel-radiusund Verwandte. Skin/navigation.scssim Theme, das nach der Variante geladen wird.
Das ist die Naht, an der man ansetzt, wenn das Dropdown eines Themes anders aussehen muss als die Vorgabe der Variante. Siehe 15 — Theming.
Sprachmenü
Mehrsprachige Sites bekommen eine Sprach-Pille in der Leiste mit einem Dropdown und mobil ein Blatt, das von unten hereinfährt. Ihre Ecken folgen denselben beiden Rundungsfeldern wie der Rest der Navigation.
Suche
Unter Navigation → Language & search einschalten und die Search results page setzen. Das Theme rendert das Feld und schickt per GET ab; die Ergebnisseite braucht ein Such-Plugin. Ohne Zielseite geht die Anfrage an die aktuelle Seite — das leiseste denkbare Scheitern, also setzen.