BindMENU 2.0, a powerful component included with your BindTuning theme, offers robust capabilities to configure diverse navigation menus within your Classic SharePoint sites (SharePoint Online Classic, SharePoint 2013, SharePoint 2016, and SharePoint 2019). This article details how to leverage BindMENU 2.0's options to create Horizontal, Vertical (Accordion), and advanced Mega Menus, along with other functionalities.
Prerequisite: To accomplish the steps described in this article, SharePoint Designer is required. You can download it here.
Edit theme's master page
To configure BindMENU 2.0, you will need to directly edit your theme's master page (.master file).
Important: Always Check out the .master file before making any edits. After saving your changes, ensure you Check in the file and, if prompted, publish a major version to make your modifications visible to all users.
Edit the master page (.master file)
If you don't know how to edit your theme .wsp file check out this article from the blog: How to manually edit a SharePoint wsp fileFor Farm solutions: Go to
All files > _catalogs > master pages. Select the master page where you'll configure navigation and move to step 2.For Sanbox solutions: Go to
All files > _catalogs > master pages > THEMENAME. Select the master page where you'll configure navigation and move to step 2.
Configure navigation options
Once you've opened your theme's master page for editing, you'll locate the existing BindMENU JavaScript script and modify its options object to define your desired menu style. You'll typically find a script similar to this:
jQuery(function($) {
var options = { // Existing or default options might be here };
$("#MenuH").BindMENU(options); // Or $("#MenuV").BindMENU(options); });You'll primarily be changing the Style property within the options object, and potentially adding other parameters as needed.
Horizontal Menu (Default)
This is the standard horizontal menu style. Set the Style value to "Default". The menu's orientation (#MenuH for horizontal, #MenuV for vertical) is automatically detected based on the targeted element.
Edit the code as shown below:
jQuery(function($) {
var options = { Style: "Default" }; // Use Default
$("#MenuH").BindMENU(options); // Use #MenuH for a horizontal menu
});
Vertical Menu (Accordion)
This style transforms your vertical menu into an interactive accordion structure. Set the Style value to "Accordion".
Edit the code as shown below:
jQuery(function($) {
var options = { Style: "Accordion" }; // Use Accordion
$('#MenuV').BindMENU(options); // Use #MenuV for a vertical menu
});
Mega Menu (horizontal)
BindTuning Mega Menus provide a powerful, multi-column dropdown structure, ideal for navigation with numerous sub-items. They automatically display a Mega Menu structure when a sub-item has its own children, or as a wide dropdown if only one sub-level exists. Set the Style value to "MegaMenu".
Edit the code as shown below:
jQuery(function($) {
var options = { Style: "MegaMenu" };
$('#MenuH').BindMENU(options); // Must be horizontal #MenuH
});
You can further customize your Mega Menu's layout and behavior using these optional parameters within the options object:
Maximum number of columns: Controls the maximum number of columns displayed in the Mega Menu. This is perfect for organizing many sub-items into multiple rows instead of a single, long row.
jQuery(function($) {
var options = {
Style: "MegaMenu",
MaxColumns: "2" // Items will be organized into max of 2 columns
};
$('#MenuH').BindMENU(options);
});
Min and Max width for submenu items: Optionally, you can set the minimum and maximum width for your submenu items (in pixels) with the variables MinWidth and MaxWidth.
jQuery(function($) {
var options = {
Style: "MegaMenu",
MaxColumns: "2",
MinWidth: "140", // Sets minimum width to 140px
MaxWidth: "140" // Sets maximum width to 140px
};
$('#MenuH').BindMENU(options);
});
Animations (horizontal)
The menu includes different animation properties (Type, Speed, Appear) to give your theme's menus a smoother user experience. These properties let you control fade-in effects when submenus appear.
Type: Defines the animation easing effect (e.g.,"easeout").Speed: Controls the animation speed (e.g.,"slow","normal","fast").Appear: Specifies the direction from which the submenu appears (e.g.,"left","right","top","bottom").
Edit the code as shown below:
jQuery(function($) {
var options = {
// ... e.g., Style: "Default" or Style: "MegaMenu")
Type: "easeout",
Speed: "slow",
Appear: "bottom"
};
$('#MenuH').BindMENU(options);
});
Collapse (horizontal)
The Collapse property defines the screen dimensions at which your horizontal menu transforms into a mobile-friendly, collapsed version. For vertical menus, this typically triggers an off-canvas display.
Edit the code as shown below:
jQuery(function($) {
var options = {
// ... (your existing Style property)
Collapse: "tablet" // Collapse on tablet-sized screens and smaller
};
$('#MenuH').BindMENU(options);
});
Extra Links (horizontal)
The MaxLinks parameter allows you to set a maximum number of menu items to appear directly on the page. Any remaining items will automatically be grouped and placed inside a submenu, helping keep your navigation concise and uncluttered.
Edit the code as shown below:
jQuery(function($) {
var options = {
// ... (your existing Style property and other options)
MaxLinks: "4" // Only 4 top-level links will appear directly
};
$('#MenuH').BindMENU(options);
});
Offcanvas (vertical)
The Offcanvas functionality (a side-sliding menu) is primarily used with vertical menus when the Collapse property is activated. This creates a responsive, slide-out navigation for smaller screens.
Note: For the Offcanvas effect to work, you must also set the Collapse value to "Phone" or "Tablet" in your menu options (as shown in the "Collapse" section).
Edit the code as shown below:
jQuery(function($) {
var options = {
Style: "Accordion",
Collapse: "Tablet" // Vertical menu goes Offcanvas on tablets/phones
};
$('#MenuV').BindMENU(options);
});
Complete menu options
Name | Type | Default | Options | Description |
Style | string |
|
| The Style parameter allows you to define the menu style you want to use with your theme. You can choose between Default (Horizontal and Vertical), MegaMenu or Accordion. |
EventTrigger | string |
|
| With EventTrigger, events that will cause the show and hide of the menu options. Can only be |
Speed | string |
|
| With Speed you can control the speed of your submenu animations. |
Appear | string |
|
| Allows you to control the point of origin of the submenu as it appears on the screen. |
Collapse | string |
|
| With Collapse you can decide when the menu transforms into a mobile menu. With a mobile menu, the horizontal menu collapses and the vertical menu goes off-canvas. |
MinWidth Horizontal menu only | number | "140" | any value | Allows you to set the minimum width for subitems. If any other string is supplied, or if the |
MaxWidth Horizontal menu only | number | not specified | any value | Allows you to set the minimum width for subitems. If any other string is supplied, or if the |
MaxColumns Mega menu only | number | not specified | any value | Allows you to control the number of columns displayed in the Mega menu. Ideal for Mega menus with several subitems. If any other string is supplied, or if the |
MaxLinks Horizontal menu only | number | not specified | any value | Allows you to set a max number of items on the menu. The remaining items will hide inside a collapsible submenu. |