Screenshot showing TypoScript for a menu

HMENU-TypoScripts for various navigations

In TYPO3 navigations are usually created using the HMENU cObject. The whole range of configurations and wraps can be difficult to manage at first, though. Here you can find ready-made snippets for several navigations like Bootstrap.

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). Furthermore, the cab AG offers a great graphical demonstration of the wraps.

Bootstrap 3: Default Navbar

The usual navbar, easily adaptable if you want to use the versions Static top or Fixed top.

Demo & TypoScript

Bootstrap 3: Navbar with language menu

In this version a language menu is added as a right navbar. In mobile view the language menu gets attached to the page navigation.

Demo & TypoScript

Bootstrap 3: Navbar with additional notes

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.

Demo & TypoScript

Bootstrap 3: Multi-level navigation with jQuery.Smartmenus

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.

Demo & TypoScript

checkboxNav: A CSS-only, Sass-built responsive multi-level navigation

checkboxNav is based on a tutorial from W3Bits, which uses the Checkbox Hack to create a mobile-friendly dropdown menu without relying on JavaScript.

I completely rebuilt the navigation with Sass and significantly streamlined the markup and styling. It can be easily customized through variables and themes.

Download checkboxNav on GitHub

Demo & TypoScript (with hamburger icon)

Demo & Typoscript (as menu bar)

jQuery.mmenu: Sliding submenus, off-canvas

jQuery.mmenu is a highly customizable Off-canvas navigation. A default feature are the sliding submenus.

Demo & TypoScript

Back