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