Currently selected page: "Elstar"

Bootstrap 3: Multi-level navigation with SmartMenus jQuery

The Navbar is extended by more sublevels. This is based on SmartMenus jQuery, therefore 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

Additional demo: SmartMenus jQuery Website Menu - Bootstrap Addon

Functionality: In mobile view the first click on a menu item with subpages opens the submenu level. If you click a second time on the same menu item, it follows the associated link (only works up to and including version 1.0.1). You can use the sub-arrow buttons to close the submenu again, though.

TypoScript of navigation:

lib.bootstrap3-smartmenus = COA
lib.bootstrap3-smartmenus {
    wrap = <nav class="navbar navbar-default" role="navigation"> <div class="container-fluid"> | </div> </nav>

    10 = COA
    10 {
        wrap = <div class="navbar-header"> | </div>
        10 = COA
        10 {
            // hamburger icon:
            wrap = <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> | </button>
            10 = TEXT
            10.value = <span class="sr-only">Toggle navigation</span>
            20 = TEXT
            20.value = <span class="icon-bar"></span>
            21 < .20
            22 < .20
        }

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

    20 = COA
    20 {
        wrap = <div class="navbar-collapse collapse"> | </div>

        10 = HMENU
        10 {
            wrap = <ul class="nav navbar-nav"> | </ul>

            1 = TMENU
            1 {
                expAll = 1

                NO = 1
                NO {
                    ATagTitle.field = title
                    wrapItemAndSub = <li>|</li>

                    // Set 'active' class to shortcuts that link to the current page (e.g. useful when 'Home' is root page):
                    wrapItemAndSub.override.cObject = COA
                    wrapItemAndSub.override.cObject {
                        if {
                            value = 4
                            equals.field = doktype
                            isTrue = 1
                            isTrue.if {
                                value.data = TSFE:page|uid
                                equals.field = shortcut
                            }
                        }

                        10 = TEXT
                        10.value = <li class="active">|</li>
                    }
                }

                CUR < .NO
                CUR {
                    wrapItemAndSub = <li class="active">|</li>
                }

                IFSUB = 1
                IFSUB {
                    ATagTitle.field = title
                    ATagParams = class="sub-arrow"
                    linkWrap = |<span class="caret"></span>
                    ATagBeforeWrap = 1
                    wrapItemAndSub = <li>|</li>
                }

                CURIFSUB < .IFSUB
                CURIFSUB {
                    wrapItemAndSub = <li class="active">|</li>
                }

                ACT < .CUR
                ACTIFSUB < .CURIFSUB

                SPC = 1
                SPC {
                    // no divider, if first menu item on this level (using optionSplit):
                    wrapItemAndSub = <li class="dropdown-header">|</li> |*| <li class="divider"></li><li class="dropdown-header">|</li>
                }
            }

            2 < .1
            2 {
                wrap = <ul class="dropdown-menu">|</ul>
            }

            3 < .2
            4 < .3
        }
    }
}