TYPO3 third navigation level with bootstrap

Question

I have the following typoscript snippet which makes me a drop down navigation with bootstrap.

 MENU = HMENU
    MENU.entryLevel = 0
    #NAVIMAIN.excludeUidList = 

    MENU {
    1 = TMENU
    1 {
      expAll = 1

    NO.allWrap = |
    NO.ATagTitle.field = abstract // description // title

    ACT = 1
    ACT.wrapItemAndSub = |
    ACT.ATagTitle.field = abstract // description // title

    IFSUB = 1
    IFSUB.before = 
    IFSUB.after =  
    IFSUB.doNotLinkIt = 1
    IFSUB.wrapItemAndSub = |
    IFSUB.ATagTitle.field = abstract // description // title

    ACTIFSUB = 1
    ACTIFSUB.before = 
    ACTIFSUB.after =  
    ACTIFSUB.doNotLinkIt = 1
    ACTIFSUB.wrapItemAndSub = |
    ACTIFSUB.ATagTitle.field = abstract // description // title

    wrap = |
  }

       2 = TMENU
  2 {
    expAll = 1

    ACT = 1
    ACT.wrapItemAndSub = |
    ACT.ATagTitle.field = abstract // description // title

    ACTIFSUB = 1
    ACTIFSUB.wrapItemAndSub = |
    ACTIFSUB.before = 

    ACTIFSUB.after = 
    ACTIFSUB.doNotLinkIt = 1
    ACTIFSUB.ATagTitle.field = abstract // description // title

    NO.allWrap = |
    NO.ATagTitle.field = abstract // description // title

    IFSUB = 1
    IFSUB.before = 

    IFSUB.after = 
    IFSUB.doNotLinkIt = 1
    IFSUB.ATagTitle.field = abstract // description // title

    SPC = 1
    SPC.allWrap = 
|

    wrap = |
  }

How can I add a third level Menü as dropdown of a second level menü?

Thanks in advance.

sebkln · Accepted Answer

The default navbar of Bootstrap only supports two levels. I'd recommend using Smartmenus jQuery to get three or more sublevels.

The adapted HMENU setup for TYPO3 would be like this:

lib.bootstrap3-smartmenus = COA
lib.bootstrap3-smartmenus {
  wrap =   | 
 
  
  10 = COA
  10 {
    wrap =  | 
    10 = COA
    10 {
      // hamburger icon:
      wrap = 
      10 = TEXT
      10.value = Toggle navigation
      20 = TEXT
      20.value = 
      21 < .20
      22 < .20
    }
  
    // company name/logo:
    20 = TEXT
    20.value = Project name
    20.typolink {
      parameter = http://www.example.org/
      ATagParams = class="navbar-brand"
    }
  }
  
  20 = COA
  20 {
    wrap =  | 
  
    10 = HMENU
    10 {
      wrap =  | 
  
      1 = TMENU
      1 {
        expAll = 1
  
        NO = 1
        NO {
          ATagTitle.field = title
          wrapItemAndSub = |
        }
  
        CUR < .NO
        CUR {
          wrapItemAndSub = |
        }
 
        IFSUB = 1
        IFSUB {
          ATagTitle.field = title
          ATagParams = class="sub-arrow"
          linkWrap = |
          ATagBeforeWrap = 1
          wrapItemAndSub = |
        }
 
        CURIFSUB < .IFSUB
        CURIFSUB {
          wrapItemAndSub = |
        }
  
        ACT < .CUR
        ACTIFSUB < .CURIFSUB
  
        SPC = 1
        SPC {
          // no divider, if first menu item on this level (using optionSplit):
          wrapItemAndSub = |
 |*| 
|
        }
      }
  
      2 < .1
      2 {
        wrap = |
  
      }
  
      3 < .2
      4 < .3
    }
  }
}

Some changes to the markup must be made (e.g. no more data-toggle="dropdown").

In addition to the default Bootstrap files, these CSS and JavaScripts must be used:

jquery.smartmenus.bootstrap.css
jquery.smartmenus.min.js
jquery.smartmenus.bootstrap.min.js

I once created a demo (including this information) here.

Edit: If you rather want to extend the default Bootstrap navbar with the provided example, you can use the following TypoScript setup. I successfully tested it with the extra CSS of the Codepen example.

It removes the caret element in sublevels and add the extra classes you need. You can adjust the classes container/container-fluid and navbar-fixed-top to your needs.

This TypoScript (as well as the snippet above) will also take care of menu separator pages in TYPO3 (SPC) and adds the divider element of Bootstrap only, if it is not the first subpage of this branch of the page tree.

lib.navbar = COA
lib.navbar {
    wrap =   | 
 

    10 = COA
    10 {
        wrap =  | 
        10 = COA
        10 {
            // hamburger icon:
            wrap = 
            10 = TEXT
            10.value = Toggle navigation
            20 = TEXT
            20.value = 
            21 < .20
            22 < .20
        }

        // company name/logo:
        20 = TEXT
        20.value = Project name
        20.typolink {
            parameter = http://www.example.org/
            ATagParams = class="navbar-brand"
        }
    }

    20 = HMENU
    20 {
        wrap =   | 
 

        1 = TMENU
        1 {
            expAll = 1

            NO = 1
            NO {
                ATagTitle.field = title
                wrapItemAndSub = |
            }

            CUR < .NO
            CUR {
                wrapItemAndSub = |
            }

            ACT < .CUR

            IFSUB = 1
            IFSUB {
                ATagTitle.field = title
                ATagParams = class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"
                linkWrap = |
                ATagBeforeWrap = 1
                wrapItemAndSub = |
            }

            ACTIFSUB < .IFSUB
            ACTIFSUB {
                wrapItemAndSub = |
            }

            CURIFSUB < .ACTIFSUB
        }

        2 < .1
        2 {
            // Adjust several classes for sublevels
            wrap = |
            IFSUB.wrapItemAndSub = |
            ACTIFSUB.wrapItemAndSub = |
            // Remove caret element (correct arrow is set with ::after pseudo element)
            IFSUB.linkWrap >
            ACTIFSUB.linkWrap >

            CURIFSUB < .ACTIFSUB

            SPC = 1
            SPC {
                // no divider, if first menu item on this level (using optionSplit):
                wrapItemAndSub = |
 |*| 
|
            }
        }

        3 < .2
        4 < .3
    }
}

Please be aware that pages containing sublevels cannot not be linked to a page in TYPO3 this way. You'll need to use Shortcut pages, just as do with these pages on the first level of this navigation.

TYPO3 third navigation level with bootstrap

Answers (1)

Related Questions