pdoMenu und Bootstrap Navbar

pdoMenu

Ausgegeben wird eine unordered list mit list-items, die auf die Kind-Ressourcen einer oder mehrerer Ressourcen verweist.

[[!pdoMenu ?
    &parents=`59`
    &tpl=`pdo_navbar_tpl`
    &tplOuter=`pdo_navbar_tplWrapper`
]]

&parents=`59`

Füge die ID der Ressourcen ein, deren darunter liegenden Ressourcen du einblenden möchtest. Mehrere IDs werden mit Kommata getrennt.

Zuerst erstellst du einen Chunk mit nachfolgendem Code, dessen Namen du dann zwischen die backticks im pdoMenu einfügst.

&tpl=`pdo_navbar_tpl`

<li>
    <a href="[[~[[+id]]]]">[[+pagetitle]]</a>
</li>

Anschließend erstellst du den zweiten Chunk:

&tplWrapper=`pdo_navbar_tplOuter`

<ul>
    [[+wrapper]]
</ul>

Kombination mit Bootstrap Navbar

Ich habe eine Navbar aus der Bootstrap Bibliothek (v.5.1.3) kopiert. Achte in der Dokumentation darauf, dass du die BS Version ausgewählt hast, die du verwendest.

Bootstrap v5.1 Navbar

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">LOGO</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav me-auto mb-2 mb-lg-0">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            Dropdown
          </a>
          <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
            <li><a class="dropdown-item" href="#">Action</a></li>
            <li><a class="dropdown-item" href="#">Another action</a></li>
            <li><hr class="dropdown-divider"></li>
            <li><a class="dropdown-item" href="#">Something else here</a></li>
          </ul>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled">Disabled</a>
        </li>
      </ul>
      <form class="d-flex">
        <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
        <button class="btn btn-outline-success" type="submit">Search</button>
      </form>
    </div>
  </div>
</nav>

Nun erweitern wir die mit pdoMenu aufgerufene <ul>. Die Bootstrap Klassen können wir ganz leicht in unsere Chunks integrieren. Ich bestimme in unserem Beispiel die Klassen teilweise im Chunk selbst, teilweise via pdoMenu und der Varibalen [[+classes]] im Chunk pdo_navbar_tplOuter.

&tpl=`pdo_navbar_tpl`

<li class="nav-item mx-2">
    <a class="nav-link" href="[[~[[+id]]]]">[[+pagetitle]]</a>
</li>

&tpl=`pdo_navbar_tplOuter`

Hier wird schließlich noch die Bootstrap Navbar hinzugefügt.

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">LOGO</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul [[+classes]]>
            [[+wrapper]]
        </ul>
    </div>
  </div>
</nav>

Das Ergebnis

[[!pdoMenu ?
    &parents=`59`
    &tpl=`pdo_navbar_tpl`
    &tplOuter=`pdo_navbar_tplOuter`
    &outerClass=`navbar-nav me-auto mb-2 mb-lg-0`
]]