Ultimenu
A mega menu module that creates dynamic regions based on menu items, allowing blocks to be placed within menu dropdowns/flyouts.
ultimenu
Install
composer require 'drupal/ultimenu:^3.0'
Overview
Ultimenu is an ultimately dead-simple mega menu solution that creates dynamic Drupal regions based on available menus. Unlike traditional mega menus, Ultimenu takes a unique approach where an Ultimenu block is based on a menu, and Ultimenu regions are based on the menu items.
The result is a block that contains regions containing blocks, as opposed to: a region contains blocks. This architecture allows site builders to embed almost anything into menu flyouts including views, panels, blocks, slideshows, and any other block-compatible content.
The module manages the toggle of Ultimenu blocks, regions, and a skins library, while leaving the management of blocks, menus, and regions to Drupal core. This provides maximum flexibility with minimal complexity.
Key features include: off-canvas mobile menus with multiple animation skins, AJAX-loaded flyout content for performance optimization, customizable skins system with theme auto-discovery, support for iconized menu titles, collapsible submenus, sticky headers, and full multilingual support with hash-based region keys.
Features
- Multiple instances of Ultimenu blocks based on any available system or custom menus
- Dynamic regions based on menu items that can be toggled without touching .info.yml files
- Off-canvas menu with 7 animation skins (bottomsheet, pushdown, scalein, slidein, slideover, zoomin)
- AJAX-loaded flyout regions for improved performance with massive menu contents
- Customizable CSS skins with auto-discovery from theme default css/ultimenu directory
- Support for iconized menu titles and descriptions using fa-* or icon-* prefixes
- Collapsible submenu support for nested menu structures
- Multiple flyout orientations: horizontal to bottom/top, vertical to left/right
- Hash-based region keys for multilingual site stability
- Caret-based menu interactions as alternative to hover states
- Sticky/fixed header support for hoverable menus
- Integration with Context module for block placement and region visibility
- CSS3 pure animation without JavaScript dependencies for core interactions
- Menu description rendering with configurable position (above or below title)
- CSS class options: title class, mlid class, hash class, and counter class on menu items
Use Cases
Corporate Website Mega Menu
Create a sophisticated mega menu for a corporate website by enabling the Main navigation menu as an Ultimenu block. Place it in the header region and add Views blocks showing featured products, recent news, or service categories to each menu item's flyout region. Use the horizontal-to-bottom orientation with a custom skin matching corporate branding.
E-commerce Category Navigation
Build product category navigation by creating menu items for each category and enabling their Ultimenu regions. Add category-specific blocks showing featured products, brand logos, or promotional banners. Enable AJAX loading for flyouts to improve initial page load performance with large catalogs.
Mobile-First Off-Canvas Navigation
Implement responsive off-canvas navigation by enabling the offcanvas option on the Ultimenu block. Configure canvas_off selector (e.g., #header) and canvas_on selectors for main content areas. Choose from animation skins like scalein or slideover for smooth mobile menu transitions. Use hamburger option for consistent mobile/desktop behavior.
Multilingual Site Navigation
Set up stable mega menu regions for multilingual sites by enabling 'Use shortened HASH for Ultimenu region key' in goodies. This prevents region loss when menu titles are translated. Configure Menu Manipulator integration to filter menu items by current language.
Sidebar Category Menu with Submenus
Create a vertical sidebar mega menu by placing the Ultimenu block in a sidebar region with vertical-to-right orientation. Enable 'Render submenu' option to automatically display child menu items within flyouts. Enable 'Collapsible submenu' for accordion-style navigation on mobile.
Footer Mega Menu with Contact Information
Build an informative footer mega menu using horizontal-to-top orientation. Place blocks with contact information, social media links, newsletter signup forms, and sitemap views in each menu item's flyout region. Use a dark skin to match footer design conventions.
Tips
- Use hash-based region keys from the start for any site that might become multilingual or where editors may change menu titles
- Test off-canvas functionality with Bartik or Olivero themes first to understand the required HTML structure before applying to custom themes
- Place the is-ultimenu__canvas-off and is-ultimenu__canvas-on classes directly in your theme's Twig templates to avoid FOUC (flash of unstyled content)
- For iconized menu titles, use the Description field with icon-* or fa-* prefixes to keep admin interfaces clean while displaying icons on the frontend
- Enable AJAX loading only for flyouts with heavy content like Views or complex blocks to balance performance and user experience
- Copy the generated region definitions from the goodies section into your theme's .info.yml file for permanent storage of Ultimenu regions
- Use the CSS variables defined in ultimenu.css and ultimenu.media-query.css for easy customization of breakpoints and spacing
Technical Details
Admin Pages 1
/admin/structure/ultimenu
Main configuration page for managing Ultimenu blocks, regions, and global settings. Create mega menu blocks based on existing menus and enable/disable dynamic regions based on menu items.
Permissions 1
Hooks 2
hook_ultimenu_attach_alter
Allows modules to alter the attached libraries and drupalSettings for Ultimenu blocks
hook_ultimenu_build_alter
Allows modules to alter the Ultimenu build array before rendering
Troubleshooting 7
Clear all caches at /admin/config/development/performance. Regions are dynamically registered and require cache clearing for the theme to recognize them.
Enable 'Use shortened HASH for Ultimenu region key' in goodies settings. This creates stable region keys based on a hash instead of the translatable title.
Verify that canvas_off and canvas_on CSS selectors are correct for your theme. The off-canvas element and on-canvas elements must be siblings at the same DOM level. Test with Bartik theme first using default values.
Ensure at least one visible block is placed in the Ultimenu region. Check block visibility settings and user role permissions. For path-based visibility, verify the current path matches the block's visibility rules.
Enable 'Force remove Ultimenu region stored in theme .info.yml' in goodies to have Ultimenu settings take precedence over theme-defined regions.
Ensure you have enabled menus under 'Toggle Ultimenu blocks' and saved. Clear caches and check the Ultimenu category in block placement.
Enable 'Render submenu' in the Ultimenu block configuration. Additionally, ensure 'Show as expanded' is checked on the parent menu item in menu administration.
Security Notes 4
- The 'administer ultimenu' permission is marked as restricted access and should only be granted to trusted administrators
- Custom skin paths are validated to ensure the directory exists before being saved
- User input in settings (skins path, fallback text, AJAX max-width, icon classes) is sanitized with strip_tags and Xss::filter
- AJAX endpoint access is controlled by individual block permissions - each block's access is checked before content is returned