TYPO3 Navigation als Navbar mit Bootstrap 4 und TypoScript

Das JavaScript und CSS Framework Twitter Bootstrap liegt derzeit in der vierten Version vor. Bootstrap 4 bietet gegenüber der Vorgängerversion einen erweiterten Umfang an Funktionen. So ist z. B. ein Slider mit eingeschlossen. 

Für die Navigation gibt es neben dem Megamenu (hier ein Beispiel für den Quellcode) auch die Variante einer Drop Down Navigation in Form einer Navbar ähnlich wie der Standard der Version Bootstrap 3. Ebenso bietet diese Navigation Vor- und Nachteile, die wir an dieser Stelle bereits beschrieben haben.

TypoScript Code für Bootstrap 3 Navbar zur Navigation

Sehen Sie hier nun ein Beispiel für die Einbindung einer Navigation über zwei Ebenen mit Bootstrap 4. Wir schreiben hier eine Funktion mit TypoScript und binden diese auf gewohntem Weg in ein Fluid Template oder Partial ein.

 lib.navigation = COA
lib.navigation {
  wrap = <nav class="navbar navbar-expand-lg"> <div class="container"> | </div> </nav>
  
  10 = COA
  10 {
    10 = COA
    10 {
      wrap = <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">|</button>
      10 = TEXT
      10.value = <span class="navbar-toggler-icon"></span>
    }
  }
   
  20 = HMENU
  20 {
    wrap = <div class="collapse navbar-collapse" id="navbar"> <ul class="navbar-nav mr-auto"> | </ul> </div>
          
    1 = TMENU
    1 {
      expAll = 1
   
      NO = 1
      NO {
        ATagTitle.field = subtitle // title
        wrapItemAndSub = <li class="nav-item">|</li>
        ATagParams = class="nav-link"
      }
   
      CUR < .NO
      CUR {
        wrapItemAndSub = <li class="nav-item active">|</li>
      }
   
      ACT < .CUR
 
      IFSUB = 1
      IFSUB {
        ATagTitle.field = subtitle // title
        ATagParams = class="nav-link dropdown-toggle" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"
        ATagBeforeWrap = 1
        wrapItemAndSub = <li class="nav-item dropdown">|</li>
      }
   
      ACTIFSUB < .IFSUB
      ACTIFSUB {
        wrapItemAndSub = <li class="nav-item dropdown active">|</li>
      }
   
      CURIFSUB < .ACTIFSUB
    }
   
    2 < .1
    2 {
        wrap = <ul class="dropdown-menu">|</ul>
        IFSUB = 0
    }
  }
}

Einbindung von TypoScript und Funktion

Im oben stehenden Beispiel erzeugen wir eine Funktion lib.navigation. Sinnvoll ist es, diese in einer eigenen TypoScript Datei wie z. B. lib.navigation.ts im Dateisystem der Webseite zu speichern. Dies wird nun über das Setup ins System eingebunden:

@import "EXT:ibkprovider/Configuration/TypoScript/lib.navigation.ts"

Damit steht dem System nun die Datei bereit. Der nächste Schritt ist nun, die oben beschriebene Funktion in das entsprechende Fluid Template einzubinden:

 <div class="row">
    <div class="col-md-12 col-sm-12">
        <f:cObject typoscriptObjectPath="lib.navigation" />
    </div>
</div>

Damit steht Ihnen die Navigation in Ihrer Webseite zur Verfügung. 

CSS Style Sheet für Bootstrap 4 Navbar

Was Entwickler, und nicht nur für TYPO3, freut: Wenn man der Bootrap 4 Navbar eigene Farben mitgeben will, kommt man mit erheblich weniger Quelltext und Klassen im Style Sheet aus als bei Bootstrap 3! Rund 30 Zeilen Source Code im CSS reichen aus, um alle wichtige Zustände der Navigation in der Navbar mit eigenen Farben zu versehen.

Wir haben dazu Style Sheets für Sie vorbereitet:

CSS Style Sheet für Bootstrap 4 Navbar