Do I need a mega menu module with DXPR Theme?

No. Columns, three levels, hover and click behavior, keyboard support and the mobile menu come from the theme. You only need a nested menu with Show as expanded on the parents, or Expand all menu links on the menu block.

Why does my dropdown only open on click?

Because somewhere in the menu a dropdown has a third level. The theme then switches the whole menu to click-only, so a submenu never closes while the pointer travels towards it. Flatten the structure to two levels if you want hover everywhere. Touch screens and windows narrower than 992 pixels always use click.

How do I get the full-width mega menu layout?

Give the dropdown 15 or more direct children. From three columns on it spans the full header width. With 8 to 14 children you get two columns under the parent link; fewer stays a single column.

Can a parent link open the dropdown without going anywhere?

Yes. Enter <nolink> or <button> as the link when you edit the menu item; both are built into Drupal core. The parent then toggles its dropdown and has no page of its own.

Drupal Mega Menu Without a Module: DXPR Theme Multi-Level Menus

DXPR Theme builds its mega menu from Drupal's own menu system. You create the structure under Structure › Menus, the theme turns it into dropdowns that split into columns when they grow, nest three levels deep, open on hover or click, and fold into a hamburger menu on phones. No mega menu module, no extra configuration, and the same links serve desktop and mobile.

This guide covers DXPR Theme 8.2.1 or later on Drupal 10.3 and Drupal 11. The screenshots come from a Drupal 11.4 site with DXPR Theme 8.2.2 and a three-level example menu, taken in October 2026.

How the menu behaves

Dropdowns from indentation. Every menu link with children becomes a dropdown. A parent that has its own page gets a split control: the link navigates, the caret next to it opens the dropdown. A parent without a page opens the dropdown with one click.
Columns from the number of links. A dropdown with 8 or more direct children splits into 2 columns, 15 or more into 3, 21 or more into 4 and 28 or more into 5. From 3 columns on, the dropdown stretches to the full width of the header, which is the mega menu layout.
Three levels. A link inside a dropdown can have children of its own. They expand inside the dropdown, indented under their parent, so a Services › Research › Laboratories structure works without flattening.
Hover or click. On a desktop with a mouse, dropdowns open on hover and always on click. When any dropdown in the menu has a third level, every dropdown switches to click-only, so a submenu never closes while the pointer travels towards it. Touch screens and windows narrower than 992 pixels always use click.
Keyboard and screen readers. Arrow keys, Enter, Space, Escape and Tab move through the menu, and toggles expose their state with aria-expanded, following the WAI disclosure navigation pattern.
Right-to-left languages get mirrored dropdowns and submenus.
Phones and tablets. Below the mobile breakpoint, 1200 pixels by default, the header shows a hamburger icon. It opens the menu over the page, and the caret next to each parent expands its children in place, on the second level as on the first.

1. Create the structure

Go to Structure › Menus › Main navigation (/admin/structure/menu/manage/main).
Add the links you need with Add link. For a parent without a page of its own, enter <button> (a native keyboard button) or <nolink> as the link; both open the dropdown.
Drag the children under their parent so they indent one level, and a third level one more, then press Save.
Edit every parent link, tick Show as expanded and press Save. To expand every parent at once, tick Expand all menu links in the settings of the main menu block instead.

That is the whole configuration. Three levels is the maximum the dropdowns render; deeper links belong in the page, not the menu.

The Main navigation menu admin page: Services with Research, Teaching and Facilities indented under it, Laboratories, Publications and Funding under Research, then About with three children, and Blog

The menu admin page: children indented under their parent, a third level under the second.

The edit form of the Services menu link with the link /services, the Main navigation as parent and Show as expanded ticked under Display settings

A parent link without Show as expanded renders without its children, except on its own page.

2. Check the desktop menu

Open the site and hover over the caret next to a parent link, or click it; a parent without a page also opens on click. When the menu has a third level, dropdowns open on click only. A short list opens as a single-column dropdown; a long one spreads into columns and, from three columns on, across the full width of the header. The order follows the weight of the links in the menu admin page, column by column.

A DXPR Theme header with the Services dropdown open: Research expanded in place with Laboratories, Publications and Funding indented under it, followed by Teaching and Facilities

The Services dropdown on desktop, with the third level expanded inside it.

3. Check the mobile menu

Narrow the browser below the mobile breakpoint or open the site on a phone. The hamburger icon opens the menu over the page. Tap the caret next to a parent to expand its children in place, and the caret next to a second-level link to expand the third level. Nothing to configure: it is the same menu.

The DXPR Theme mobile menu on a phone with Services expanded to Research, Teaching and Facilities, a caret next to Research, then About and Blog

The mobile menu with Services expanded; the caret next to Research opens the third level.

4. Style the header and the menu

Everything about the look lives on the Header & Main Menu tab of the theme settings (Appearance, then Settings next to DXPR Theme or your subtheme). The settings page shows a live preview while you change them.

Layout: seven header layouts, from Normal (Logo left, Menu Right) through centered stacked and inline variants to Logo Right, Menu Left.
Header Style: Normal, or Overlay to place the header over the page content with a transparent background, plus the header opacity, height and logo height. Fixed Position keeps the header in view while scrolling; with it on, Sticky Header switches the header to a smaller height and its own opacity after a scroll offset.
Main Menu Links: Dropdown Width (automatic, or a fixed width from 100 to 500 pixels), Font Style (normal, uppercase, bold or lead text), Link Spacing, and a Hover Style of opacity, colored background, colored text or a border (top or bottom, sliding in from the left, the right, the middle or fading in from the top).
Mobile Header and Mobile Menu Options: the mobile breakpoint (set it to the maximum, 4100, to always use the mobile header), the mobile header height and position, the hamburger icon (three or two lines), its animation and the alignment of the menu.
Custom Header Colors: sixteen color choices, background and text for the navbar, header blocks, menu, dropdowns and mobile menu, plus hover background and text for the last three, each picked from the theme palette or set to a custom value.

Every change is a setting, not CSS, so it survives theme updates. A subtheme has its own settings, so make these changes on the subtheme's settings page.

DXPR Theme Mobile Header settings: Mobile Breakpoint 1200, Height 40 and the Fixed Position switch

DXPR Theme Custom Header Colors: Dropdown Background, Dropdown Text, their hover variants and the Mobile Menu colours, all set to None (Theme Default)

Coming from The Better Mega Menu or another menu module

Uninstall the module and place the core Main navigation block in the theme's Navigation (Collapsible) region if it is not there already; that region is the one the hamburger menu collapses on small screens. Everything the module did with configuration, DXPR Theme does from the menu structure: columns, levels, hover and the mobile menu. What does not carry over is content inside the dropdown, such as images or text blocks; put those on the landing pages the menu links to.

Let your AI agent build the menu

A menu is a list of links with a hierarchy, the kind of structured task a coding agent does well. With the Drush Webmaster skill installed (drush wm:setup-ai), your agent creates and orders the menu links from a brief, such as "a Services menu with Research, Teaching and Facilities, and three laboratories under Research". With DXPR Theme's skill (drush dxt:setup-ai) it also sets the header layout, sticky behavior and menu colors to match the brand. You review the result on the site.

Responsive multi-level mega menus with DXPR Theme.