Currently selected page: "Apples"

Bootstrap 3: Navbar with language menu

This snippet builds a page navigation on the left and a language menu on the right. In mobile view both menus are accessible via the same menu button (hamburger icon).

The icon for the language menu is taken from the Google Material Icons.

When changing the language, the ID of the current page is kept.

TypoScript of navigation:

lib.bootstrap3-language = COA
lib.bootstrap3-language {
    wrap = <nav class="navbar navbar-default"> <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 collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">|</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 id="navbar" class="navbar-collapse collapse"> | </div>

        // page menu:
        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>
                }

                ACT < .CUR

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

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

                CURIFSUB < .ACTIFSUB
            }

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

                // because default Bootstrap 3 doesn't support more submenu levels:
                IFSUB >
                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>
                }
            }
        }

        // language menu:
        20 = HMENU
        20 {
            special = language
            special.value = 0,1

            addQueryString = 1
            addQueryString.exclude = id
            addQueryString.method = GET

            wrap = <ul class="nav navbar-nav navbar-right"><li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"><span class="ic-language"></span> <span class="caret"></span></a>|</li></ul>

            1 = TMENU
            1 {
                wrap = <ul class="dropdown-menu" role="menu">|</ul>
                NO = 1
                NO {
                    wrapItemAndSub = <li>|</li>
                    stdWrap.cObject = TEXT
                    stdWrap.cObject {
                        value = Deutsch || English
                    }
                }
                ACT < .NO
                ACT {
                    wrapItemAndSub = <li class="active">|</li>
                }
            }
        }
    }
}