Subscribe To Our NewsLetter
Share This Post:
What is Ultimenu?
Ultimenu is the UltimatelyDeadSimple megamenu ever with dynamic region creation. An Ultimenu block is based on a menu. mainly we used Ultimenu to create the mobile menus in Drupal. Ultimenu regions are based on the menu items. The result is a block contains regions containing blocks, as opposed to a region contains blocks.
![Ultimenu in Drupal](/sites/default/files/inline-images/How%20to%20use%20Ultimenu%20in%20Drupal.jpg)
How do we install Ultimenu?
Install the module with composer:
run command:
composer require 'drupal/ultimenu:^2.11'
After downloading, click extend and enable the module. No further dependencies are required.
![How to install Ultimenu](/sites/default/files/inline-images/03.png)
Create the menu
To create the menus we need to follow the following steps:
- Click Structure > Menus.
- Look for the Main Navigation
- Click the edit menu.
![Edit the menu](/sites/default/files/inline-images/04.png)
- Click the Add link button
- Add the first level menu items
![Click the Add link button](/sites/default/files/inline-images/05.png)
The Travel link points to route:<nolink>. This parent element is only there to contain other elements:
![Edit link menu](/sites/default/files/inline-images/06.png)
How to configure Ultimenu?
Steps:
- Click Structure > Ultimenu.
- Tab select Main navigation in the vertical Ultimenu blocks.
- Click Save configuration.
![How to configure Ultimenu](/sites/default/files/inline-images/07.png)
- Click Ultimenu regions.
- Select Ultimenu:main: Travel
- Ultimenu will create this region dynamically in the Block Layout page so that you can place blocks in it.
- Click Save Configuration
![Ultimenu:main Travel](/sites/default/files/inline-images/08.png)
To show the ultimenu for mobile & desktop, we need to enable the below configuration, there are several configurations available you can use them according to our requirements.
![ultimenu for mobile & desktop](/sites/default/files/inline-images/09.jpg)
Place the Ultimenu block
- Click Structure > Block layout.
- Place the Ultimenu: Main navigation in the Navigation (collapsible) region.
- Uncheck the Display title.
- Click Save block.
![Place the Ultimenu block](/sites/default/files/inline-images/10_1.jpg)
Configure the Ultimenu main navigation block
Here we need to update the Off-canvas element & On-canvas element ID as per our header structure. We can also manage the menu slide-in position for mobile screens. For this, we need to select the option under the off-canvas skin and flyout orientation.
![Configure the ultimenu main navigation block](/sites/default/files/inline-images/11_2.jpg)
![Configure the ultimenu submenu](/sites/default/files/inline-images/12_0.jpg)
![ultimate menu code](/sites/default/files/inline-images/13.jpg)
If you are using ultimenu:^2.11 then you need to add the class “is-ultimenu-canvas--active” on the body tag. for this use the below provided js code in your custom.js file. you can also overwrite ultimenu js as per our requirement.
![ultimenu is not working & design](/sites/default/files/inline-images/14.jpg)
![ultimate menu](/sites/default/files/inline-images/15.jpg)
Let’s Wrap It Up!
You just learned how to use the Ultimenu module in Drupal. it's a solution that improves and streamlines your web-building experience. Take advantage of this module and build your dream website with LN Webworks Today's.
Share This Post:
Author Information
![Avatar](/sites/default/files/pictures/2022-10/Frame%20%281%29.jpg)
LN Webworks
Your Drupal Solution PartnerLN Webworks have championed open-source technologies for nearly a decade, bringing advanced engineering capabilities and agile practices to some of the biggest names across media, entertainment, education, travel, hospitality, telecommunications and other industries.