---
title: "Bootstrap4 Menu mit Dropdown"
url: "https://www.typo3.net/d/127433-bootstrap4-menu-mit-dropdown"
source: "typo3.net"
tags: ["Allgemein","Bootstrap","Frage","TYPO3 9"]
created: "2019-02-20"
last_reply: "2020-10-14"
replies: 2
solved: false
page: 1
pages: 1
lang: "de"
---

# Bootstrap4 Menu mit Dropdown

Allgemein · 2 Antworten · gestartet 2019-02-20

## Eröffnungsbeitrag

**juliano** · 2019-02-20 · [Beitrag #1](https://www.typo3.net/d/127433-bootstrap4-menu-mit-dropdown/1)

Guten Tag,

ich bastel gerade an einem Bootstrap 4 Menu, was bisher auch gut funktioniert hat.
Nun merke ich das die Unterseiten beim Dropdown-Menü Probleme machen.
Ich versuche mich seit einigen Stunden daran die Bootstrap - Split-Button zu intergrieren, wo dann Links der normale Link zur Unterseite und über den Pfeil daneben dann die Unterseiten als Dropdown aufgehen.

Habe es mit doNotShowLink und addQueryString.exclude = href versucht aber bisher ohne Erfolg.

Jemand eine Idee ?
Vielen lieben Dank

<https://v4-alpha.getbootstrap.com/components/dropdowns/#split-button-dropdowns>

```typoscript
lib.mainNavi = HMENU
lib.mainNavi {
  1 = TMENU
  1 {
    expAll = 1
    wrap = <ul class="navbar-nav">|</ul>
    NO = 1
    NO {
      wrapItemAndSub = <li class="nav-item">|</li>
      ATagParams = class="nav-link"
    }

    IFSUB < .NO
    IFSUB = 1
    IFSUB {
      wrapItemAndSub = <li class="nav-item dropdown">|</li>
      ATagParams = class="nav-link dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"
      typolink.addQueryString.exclude = href
    }

    ACT < .NO
    ACT = 1
    ACT {
      wrapItemAndSub = <li class="nav-item active">|</li>
      ATagParams = class="nav-link active"
    }

    ACTIFSUB < .NO
    ACTIFSUB = 1
    ACTIFSUB {
      wrapItemAndSub = <li class="dropdown active nav-item">|</li>
      ATagParams = class="dropdown-toggle active nav-link" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"
    }
  }

  2 = TMENU
  2 {
    wrap = <div class="dropdown-menu" role="menu">|</div>
    NO = 1
    NO {
      #wrapItemAndSub = <li class="level-2">|</li>
      ATagParams = class="dropdown-item"
      stdWrap.htmlSpecialChars = 1
    }

    ACT = .NO
    ACT {
      #wrapItemAndSub = <li class="active level-2">|</li>
      ATagParams = class="dropdown-item"
    }
  }
}
```

## Antworten

### [#2](https://www.typo3.net/d/127433-bootstrap4-menu-mit-dropdown/2) · pstranghoener · 2019-02-27

Hey Juliano,
hast du eine Lösung gefunden?
Ich pinne deine Frage mal als "wichtig" mit an.

Gruß
Philipp

### [#3](https://www.typo3.net/d/127433-bootstrap4-menu-mit-dropdown/3) · juliano · 2020-10-14

Hey Philipp,

ich denke ja.

Habe es nun wie folgt gelöst:

\`\`\`lib.mainNavi = HMENU
lib.mainNavi {

1 = TMENU
  1 {
    expAll = 1
    wrap = <ul class="navbar-nav">|</ul>

entryLevel = 0
    # prepend link to home
    stdWrap.prepend = TEXT
    stdWrap.prepend {
      htmlSpecialChars = 1
      data = leveltitle:0
      typolink.parameter.data = leveluid:0
      typolink.ATagParams = class="nav-link"

typolink.ATagParams.override = class="nav-link active"
      typolink.ATagParams.override{
        if.value.data = leveluid:0
        if.equals.data = TSFE:id
      }

wrap = <li class="nav-item">|</li>
      wrap.override = <li class="nav-item active">|<span class="sr-only"> (current)</span></li>
      wrap.override {
       if.value.data = leveluid:0
       if.equals.data = TSFE:id
      }
    }

NO = 1
    NO {
      wrapItemAndSub = <li class="nav-item">|</li>
      ATagParams = class="nav-link"
    }

IFSUB < .NO
    IFSUB = 1
    IFSUB {
      wrapItemAndSub = <li class="dropdown nav-item custom-dropdown">|</li>
      ATagParams = class="nav-link d-inline-block"
      allWrap = | <a href="#" class="dropdown-toggle nav-link dropdown-carot d-inline-block" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">&nbsp;</a>

//wrapItemAndSub = <li class="nav-item dropdown">|</li>
      //ATagParams = class="nav-link dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"
    }

ACT < .NO
    ACT = 1
    ACT {
      wrapItemAndSub = <li class="nav-item active">|</li>
      ATagParams = class="nav-link active"
    }

ACTIFSUB < .NO
    ACTIFSUB = 1
    ACTIFSUB {
      wrapItemAndSub = <li class="dropdown active nav-item custom-dropdown">|</li>
      ATagParams = class="nav-link d-inline-block active"
      allWrap = | <a href="#" class="dropdown-toggle active nav-link dropdown-carot d-inline-block" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">&nbsp;</a>
   }
  }

2 = TMENU
  2 {
    wrap = <div class="dropdown-menu" role="menu">|</div>
    NO = 1
    NO {
      #wrapItemAndSub = <li class="level-2">|</li>
      ATagParams = class="dropdown-item"
      stdWrap.htmlSpecialChars = 1
    }

ACT = .NO
    ACT {
      #wrapItemAndSub = <li class="active level-2">|</li>
      ATagParams = class="dropdown-item"
    }
  }
}

lib.content {
    render = CONTENT
    render {
        table = tt_content
        select {
            orderBy = sorting
            where.cObject = COA
            where.cObject {
                10 = TEXT
                10 {
                    field = colPos
                    intval = 1
                    ifEmpty = 0
                    noTrimWrap = | AND colPos=||
                }
            }
        }
    }
}

lib.dynamicContent = COA
lib.dynamicContent {

10 = LOAD_REGISTER
   10 {
      colPos.cObject = TEXT
      colPos.cObject {
         field = colPos
         ifEmpty.cObject = TEXT
         ifEmpty.cObject {
            value.current = 1
            ifEmpty = 0
         }
      }
      pageUid.cObject = TEXT
      pageUid.cObject {
         field = pageUid
         ifEmpty.data = TSFE:id
      }
      contentFromPid.cObject = TEXT
      contentFromPid.cObject {
         data = DB:pages:{register:pageUid}:content_from_pid
         data.insertData = 1
      }
      wrap.cObject = TEXT
      wrap.cObject {
         field = wrap
      }
   }
   20 = CONTENT
   20 {
      table = tt_content
      select {
         includeRecordsWithoutDefaultTranslation = 1
         orderBy = sorting
         where = {#colPos}={register:colPos}
         where.insertData = 1
         pidInList.data = register:pageUid
         pidInList.override.data = register:contentFromPid
      }
      stdWrap {
         dataWrap = {register:wrap}
         required = 1
      }
   }
   30 = RESTORE_REGISTER
}

lib.dynamicContentSlide =< lib.dynamicContent
lib.dynamicContentSlide.20.slide = -1

/*lib.dynamicContent = COA
lib.dynamicContent {
   10 = LOAD_REGISTER
   10.colPos.cObject = TEXT
   10.colPos.cObject {
      field = colPos
      ifEmpty.cObject = TEXT
      ifEmpty.cObject {
         value.current = 1
         ifEmpty = 0
      }
   }
   20 = CONTENT
   20 {
      table = tt_content
      select {
         orderBy = sorting
         where = colPos={register:colPos}
         where.insertData = 1
      }
   }
   90 = RESTORE_REGISTER
}
*/
page = PAGE
page {

10 = FLUIDTEMPLATE
   10 {
      templateName = Standard
      templateRootPaths {
         0 = EXT:jo_modellbau_distribution/Resources/Private/Templates/Page/
      }
      partialRootPaths {
         0 = EXT:jo_modellbau_distribution/Resources/Private/Partials/Page/
      }
      layoutRootPaths {
         0 = EXT:jo_modellbau_distribution/Resources/Private/Layouts/Page/
      }
   }
}´´´

---

Quelle: „Bootstrap4 Menu mit Dropdown“, typo3.net, https://www.typo3.net/d/127433-bootstrap4-menu-mit-dropdown
Beiträge von Mitgliedern des Forums. Bitte mit Link auf die Diskussion zitieren.