How to put a span element inside the menu link? Which way must the menu levels be nested? The quality of the official documentation of TYPO3 has very much improved in the last years. However the HMENU cObject can still be a complex matter for TYPO3 beginners.
The linked configurations below are kept clearly and can be customized easily. Nonetheless there are quite some details; e.g. the divider bars in Bootstrap's dropdown menu are only set if the Spacer in the TYPO3 page tree is not the first menu item on this level.
Each demo shows the menu's TypoScript, some informations as well as a page structure which is generated with the exact HMENU configuration. All demos use the same TYPO3 page tree and in this way show the effects of the TypoScript. Currently there is a focus on the Bootstrap Navbar in these examples, but I will add new navigations continually.
jweiland.net provides an overview of how the menu's wraps are nested (german language, but still easily comprehensible).
The usual navbar, easily adaptable if you want to use the versions Static top or Fixed top.
In this version a language menu is added as a right navbar. In mobile view the language menu gets attached to the page navigation.
If you focus the menu items in the dropdown menu, additional informations are shown as a fly-out box. In mobile view the notes are shown indented below the menu items.
jQuery.smartMenus is a free website menu which supports multiple submenu levels. It comes with an add-on for the Bootstrap Navbar which is used in this example. The TypoScript is adapted to the changed markup.
I completely rebuilt the navigation with Sass and significantly streamlined the markup and styling. It can be easily customized through variables and themes.