Currently selected page: "Pork"

Bootstrap 3: Default Navbar

The well-known navbar of Bootstrap 3, with two menu levels.

This TypoScript builds the entire Navbar including the brand name. Each used Menu Separator (SPC) is displayed as a Dropdown Header. Above the Header a Divider is included, except where the Header is the first menu item on this level.

You can simply add the class for Static top (.navbar-static-top) or Fixed top (.navbar-fixed-top) in the <nav> element.

Rename the class .container-fluid to .container if you want to use the adaptive layout.

TypoScript of navigation:

lib.bootstrap3-basic = COA
lib.bootstrap3-basic {
    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 = HMENU
    20 {
        wrap = <div id="navbar" class="navbar-collapse collapse"> <ul class="nav navbar-nav"> | </ul> </div>

        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>
            }
        }
    }
}