Wir zeigen Ihnen hier den Aufbau einer Navigation mit TYPO3. Mit TypoScript können Sie nicht nur eine hierarchische Navigation der gesamten Webseite erzeugen. Es gibt auch Sonderfälle von Menus, die sich mit TypoScript hervorragend generieren lassen.

Diese Art der Navigation baut mit TypoScript Links zu besonderen Seiten auf.

Denn oftmals steht man bei der Arbeit an einer Webseite vor der Aufgabe, bestimmte Links auf jeder Seite zu schalten. Dies können z. B. Links zum Impressum oder zum Datenschutz sein, die im Kopfbereich oder im Footer der Webseite dargestellt werden und auf jeder Seite sichtbar sein sollen. Für diesen Fall gibt es den Typ special = list der Navigation in TypoScript. Dieser Art der Navigation gibt man bestimmte IDs von Seiten vor, die dann als Links angezeigt werden. Dabei ist es unerheblich, in welcher Hierarchie diese Links stehen.

lib.navigation_banner = COA
lib.navigation_banner {
  10 = HMENU
  10 {
    special = list
    special.value = 2, 10, 72, 71
    entryLevel = 0
  
    1 = TMENU
    1 {
      NO = 1
      expAll = 0
      collapse = 0
      NO.ATagParams = class="bread_link_small white"
      NO.linkWrap = ||*|
    }
  }
}  

Als es noch keine Smartphones und noch keine tragbaren Navigationssysteme gab, wurden Kinder in Märchen in den Wald oder in Höhlen geschickt. Damit sie wieder hinausfanden, streuten sie Brotkrümel auf den Weg. Dem gleichen Zweck dient eine Navigation in einer Webseite, die uns sagt, wie wir wieder zur Startseite zurückkommen und welche Seiten auf dem Weg dahin liegen: Die Brotkrümel-, Breadcrumb- oder Parallel-Navigation.

Dieses TypoScript baut eine Breadcrumb Navigation auf, die in der Startseite beginnt.

Dabei sind die folgenden Parameter von Bedeutung:

• special = rootline ist der Aufruf einer Parallelnavigation
• special.range = 0 lässt die Navigation in der Startseite beginnen. Möchte man z. B. erst in der 2. Ebene der Navigation beginnen, kann man hier mit dem Wert „2“ starten.
• allWrap = |*|| » |*|| ist ein schönes Beispiel für einen option split. Dieses Objekt baut die Navigation in einer bestimmten Reihenfolge auf. Als Trenner zwischen den einzelnen Menus dient ein HTML-Sonderzeichen.
• ATagParams = […] weist dem generierten <a href=„[…]“> Link eine CSS-Klasse zu.

lib.breadcrumb = HMENU
lib.breadcrumb {
  special = rootline
  special.range = 0
  1 = TMENU
  1 {
    wrap = |
    target = _top
    NO {
      linkWrap = |
      allWrap = |*|| » |*||
      ATagParams = class="bread_link_small"
    }
  }
}

Hier ist ein Sonderfall einer Breadcrumb Navigation, den wir für die Georgienseite genutzt haben. Beim Überfahren eines Links in der Parallelnavigation taucht unter dem Link ein formatierter Text auf, der eine Beschreibung der Seite enthält. Dazu nutzen wir die prepend-Methode. Aus der Tabelle pages von TYPO3 werden mehrere potenzielle Felder über field in hierarchischer Reihenfolge ausgelesen.

Das Aufklappen der Navigation muss über ein entsprechendes CSS geregelt werden.

lib.breadcrumb = HMENU
lib.breadcrumb {
  special = rootline
  special.range = 0
  1 = TMENU
  1 {
    wrap = |
    target = _top
    NO {
      linkWrap = |
      allWrap = |*|| » |*||
    
      stdWrap.prepend = TEXT
      stdWrap.prepend {
        field = description // subtitle // title
        wrap = <span>|</span>
      }
      ATagParams = class="bread_link_small"
    }
  }
}

Hier ein Sonderfall für eine Breadcrumb-Navigation: Bei der aktuellen Seite (CUR) wird der Link abgeschaltet. Dies ist insofern sinnvoll, als man sich ja gerade auf dieser Seite befindet.

lib.breadcrumb = HMENU
lib.breadcrumb {
  special = rootline
  special.range = 0
  1 = TMENU
  1 {
    wrap = |
    target = _top

    ## Normalzustand der Navigation
    NO {
      linkWrap = |
      allWrap = |*|| » |*||
    }

    ## Aktuell aufgerufene Seite nicht verlinkt
    CUR = 1
    CUR {
      doNotLinkIt = 1
    }
  }
}  

Eine Brotkrümelnavigation können wir mit TYPO3 nicht nur über TypoScript, sondern auch über den VHS Viewhelper aufbauen. Diese wundervolle Sammlung alltäglich genutzter Funktionen in einer Webseite ist dann die einzige Wahl, wenn man mit Rich Text Formaten arbeiten möchte.

Hier ein Beispiel für den Aufbau einer Breadcrumb Navigation mit dem VHS Viewhelper:

<v:page.breadCrumb as="menu">
  <ul>
    <f:for each="{menu}" as="menuItem">
      <li>
        <f:link.page pageUid="{menuItem.uid}">
          {menuItem.title}
        </f:link.page>
      </li>
    </f:for>
  </ul>
</v:page.breadCrumb>

Im obigen Fall bauen wir eine Navigation mit einer ungeordneten Liste über eine ungeordnete Liste auf. Wir können natürlich auch ein DIV-Element nehmen oder es bei reinem Text belassen - unser TYPO3 Projekt bestimmt, welcher HTML-Quelltext dabei generiert wird.

Wenn wir unsere Webseite im Rahmen einer SEO bearbeiten, ist es eine gute Maßnahmen zur Suchmaschinenoptimierung, mit Rich Text Formaten zu arbeiten. Mit Hilfe dieser Formatierung erleichtern wir Suchmaschinen das Crawlen unserer Webseite. Der Klickpfad kann mit Hilfe entsprechender Rich Text Snippets von Google eingelesen und bei einem Suchergebnis dargestellt werden.

An diesem Punkt müssen wir uns von TypoScript verabschieden. Denn um den Anforderungen des Code für das Rich Text Format zu gehorchen, müssen wir die einzelnen Ebenen der Navigation durchzählen. Dies geht mit dem VHS Viewhelper.

Hier ist nun ein Source Code für eine Brotkrümelnavigation mit dem VHS Viewhelper und Rich Text Formatierung:

<v:page.breadCrumb as="menu">
  <span itemscope itemtype="https://schema.org/BreadcrumbList">
    <f:for each="{menu}" as="menuItem" iteration="breadIteration">
      <span itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
      <f:link.page pageUid="{menuItem.uid}" title="{menuItem.title}" additionalAttributes="{itemprop="item"}">
        <span itemprop="name">{menuItem.title}</span>
      </f:link.page>
      <meta itemprop="position" content="{breadIteration.cycle}" />
      </span>
    </f:for>
  </span>
</v:page.breadCrumb>

Hier finden Sie Beispiele für Aufbau und Integration einer Footer Navigation in einer Webseite. Man nutzt Footer oftmals, um für Besucher die wichtigsten Inhalte einer Webseite auf einen Schlag und in jeder Seite sichtbar darzustellen.

Mit diesem TypoScript können Sie eine Navigation mit einer Ebene in den Footer Ihrer Webseite integrieren.

lib.navigation_footer = COA
lib.navigation_footer {
  
  10 = HMENU
  10.wrap=<div class="ibkfooter">|</div>  
  10.entryLevel = 0
  10 {
    1 = TMENU
    1 {
      NO = 1
      expAll = 1
      collapse = 0
      NO.allWrap = |*||<br />|*||
      NO.ATagParams = class="bread_link_small"
      <span class="div_footer">|</span>
    }
  }
}  

Diese Navigation baut eine Navigation auf zwei Ebenen auf.

lib.navigation_footer = COA
lib.navigation_footer {
  20 = HMENU
  
  20 {
    special = directory
    special.value = 1
    excludeUidList = 1, 2
  
    1 = TMENU
    1 {
      expAll = 1
      collapse = 0
      NO = 1
      NO {
        ATagParams = class="footer_link_small strong"
        ATagTitle.field = description // subtitle // title
        linkWrap = <div class="div_navigation_footer footer_ebene_1">|</div>
        wrapItemAndSub = <div class="footer_frame">|</div>
      }
    }
  
    2 = TMENU
    2 {
      expAll = 1
      collapse = 0
      NO = 1
      NO {
        ATagParams = class="footer_link_small"
        ATagTitle.field = description // subtitle // title
        linkWrap = <div class="div_navigation_footer footer_ebene_2">|</div>
      }
    }
  }
}  

Nun muss das CSS angepasst werden, damit die Ebenen auch responsiv dargestellt werden.

Im folgenden Kapitel beschreiben wir Ihnen an Hand von Source Code Beispielen, wie Sie ein Language Selection Menu in TYPO3 mit TypoScript aufbauen. Es gibt seit der Version 10.4 von TYPO3 jedoch auch die Möglichkeit, ein Sprachmenu über Fluid Templates mit Hilfe des Data Processors aufzubauen.

Dieses Sprachmenu ist auf zwei Sprachen (deutsch, englisch) ausgelegt. Die IDs für die Sprachen sind 0 und 1. Das Menu lässt sich für weitere Sprachen erweitern.

lib.language_text = COA
lib.language_text {
  20 = HMENU
  20 {
    special = language
    special.value = 0,1
    special.normalWhenNoLanguage = 0
    wrap =
    1 = TMENU
    1 {
      noBlur = 1
      NO = 1
      NO {
        doNotLinkIt = 1
        stdWrap.override =  de  ||  en 
        stdWrap {
          typolink {
            parameter.data = page:uid
            additionalParams = &L=0 || &L=1
            ATagParams = hreflang="de-DE" || hreflang="en-GB"
            ATagParams = class="bread_link_small"
            addQueryString = 1
            addQueryString.exclude = L,id,no_cache
            addQueryString.method = GET
            titleText.value = Hier Klicken!
            no_cache = 1
          }
        }
      }
      ACT < .NO
      ACT.linkWrap = |
      ACT.stdWrap.typolink.ATagParams = class="bread_link_small active"
      
      ## Normaler Zustand des Sprachumschalters
      USERDEF1 < .NO
      USERDEF1 {
        linkWrap = |
        stdWrap.typolink >
      }
      
      ## Aktiver Zustand für ausgewähltes Land
      USERDEF2 < .ACT
      USERDEF2 {
        linkWrap = |
        stdWrap.typolink >
      }
    }
  }
  wrap = |
}  

Dieses Sprachmenu erlaubt die Umschaltung zwischen zwei Sprachen, in diesem Fall mit den IDs 0 und 1. Diesen sind die Sprachen deutsch und englisch zugeordnet. Für beide Sprachen müssen Flaggen oder andere Symbole als Bilder bereitgestellt und eingebunden werden. Die Sprachen sind beliebig erweiterbar.

lib.language_image = HMENU
lib.language_image {
  special = language
  special.value = 0,1
  special.normalWhenNoLanguage = 0
  1 = GMENU
  1.NO {
    XY = [5.w]+2, [5.h]+2
    XY = [5.w], [5.h]
    backColor = black
    
    ## Einbindung der Flaggen als Bilder
    5 = IMAGE
    5 {
      ## Link zum Bild
      file = fileadmin/img/flags/DE.png || fileadmin/img/flags/GB.png
      
      ## Bild zuschneiden und in Größe anpassen
      file.width = 30c
      file.height = 25
      border = 0
      altText = title
      offset = 0
    }
  }
  1.ACT < .1.NO
  1.ACT = 1
  1.ACT.backColor = white
  
  ## Normalzustand der Navigation
  1.USERDEF1 < .1.NO
  1.USERDEF1 = 1
  1.USERDEF1.backColor = gray
  1.USERDEF1.10 = EFFECT
  1.USERDEF1.10.value = gray
  1.USERDEF1.noLink = 1
  
  ## Aktiver Zustand - ausgewähltes Land
  1.USERDEF2 < .1.USERDEF1
  1.USERDEF2.backColor = gray
}