Navigation

MegaMenu, section index, overlay, sidebar, and abstract—five navigation types from a single component.

Main Navigation

The main navigation at the top of the page is the default implementation. It reads the page hierarchy starting from the configured entryLevel and renders down to levels depth. Sub-items are displayed, depending on menuType as a classic dropdown or as a MegaMenu.

Live example: The navigation bar at the top of this page (About · Extensions · Elements · Page Layouts) is the active main navigation. It uses menuType = smartmenus for keyboard navigation and touch support.

MegaMenu

A MegaMenu replaces the classic dropdown with a full-width panel view featuring any number of columns and content elements. It is structured using CTypes t3bs_megamenu + t3bs_megamenu_item within the corresponding container page.

The MegaMenu page ID is stored in the site configuration under navigation.main.megaMenuPid ; for each menu item, the type can be set via t3bs_megamenu_item.type (none / classic / mega).

Live example: Click on "Elements" at the top—this opens a 5-column MegaMenu with categories (Layout, Content, Interaction, Visual, Components).

Section Index (One-Pager Menu)

On OnePager pages, the section index provides content-based navigation: every CE header visible in the table of contents becomes an anchor link. The page scrolls smoothly to the corresponding section; IntersectionObserver is used to highlight the active entry.

Configuration via the field sectionIndex per CE (Backend → CE → Appearance → "Include in OnePager Index") as well as via the TypoScript tt_content.onepage_menu in the template.

Example: The Quick Nav bar at the top of this page is a simple section index—all sections are linked as anchor buttons.

Overlay Menu (Mobile)

The overlay menu is the mobile version of the main navigation: a full-screen overlay that is opened via the burger icon. Any content elements (CEs) can be included as content (quick links, contact block, language switcher, social icons).

The page UID of the overlay content is set via navigation.main.overlayMenuPid ; alternatively, mmenu be menuType (slide-in from the left).

Test: Resize the browser window to tablet/mobile width—the hamburger button appears and opens the overlay menu.

Subnavigation / Sidebar

In two-column layouts, the sub-navigation appears as a sidebar containing the subpages of the current level. It can be configured independently (separate entryLevel, levels, showIcon, excludeUidList) and can be shown or hidden on a per-page basis via backend layouts.

Example: Go to Page Layouts → Two-Column to see the sidebar in action.

Abstract Menu

The Abstract menu displays a list of pages as cards or list items with a preview image, title, and description. Four layouts are available:

  • List (Default) — vertical list with image previews on the left
  • 4-column grid — card grid for many items
  • 6-column grid — compact card overview
  • 3-column grid — larger cards for featured lists

CType menu_abstract, layout selectable via the field layout (values: 0=List, 430–433=Grid variants).

Configuration via Site Settings

All navigation menus are configured centrally via the Site Settings. Key settings:

navigation.main.menuType

smartmenus (default) / bs5 / mmenu — Rendering engine

navigation.main.megaMenuPid

Page UID of the MegaMenu content data source

navigation.main.overlayMenuPid

Page UID for overlay menu content

navigation.main.entryLevel / .levels

Start level and depth of the main navigation

navigation.main.excludeUidList

Comma-separated list of page UIDs to hide

navigation.sub.enabled / .entryLevel

Show sub-navigation/sidebar + configuration

navigation.mobile.menuType

Mobile version (typically mmenu or overlay)

navigation.mobile.useAjax

Reload mobile menu via Ajax (performance trick)

navigation.meta.enabled

Meta navigation above the header

navigation.footer.enabled

Footer navigation (see footer demo)