TYPO3 Navigation 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 ä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 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. 

Thomas Berscheid ⧉ 12.04.2020
^