for SharePoint Online
This Mega Menu Extension is built to create custom Mega Menus for your whole SharePoint tenant. Including a Configuration Dialog and custom CSS, branding the look and feel as needed. Hamburger Menu and DropDown Menu available.
To unlock an evaluation period, please follow the link below.
this hamburger menu is based on a SharePoint list to be consumed globally.
Create your categories and links ordered by CategoryOrder field values.
Use the integrated CSS properties to style this hamburger menu and its items
this more flexible dropdown menu can be fed with a different list for each site.
If there is no list available to get the menu built the application will fall back to the root site list.
Upload the .sppkg file to the AppCatalog and check the checkbox to deploy the solution to all sites.
The Extension will automatically create the necessary configuration file and license dummy file.
Navigate back to your root site collection and create the below Configuration list called: MegaMenu and set up a couple of items.
For the DropDown Menu, please create an identical list.
Back to your root site collection, modify the URL in your browser: http://yoururl?btmm=1
This will open the configuration Dialog to enable the Menu by a dropdown.
The save button will update the configuration file and redirect you to the current page within 2.5seconds.
Create a custom list first with the following Fields in Classic Mode:
Field Name | Field Type | Value |
|---|---|---|
Title | a single line of text | Is used to set the link alternate text (optional). |
Link | Hyperlink | Description is used to set alternate text if Title is not used. |
Category | Choice | Enter your Section names. |
CategoryOrder | Number | Each section (Category field) should have one number. |
Target | Choice | _self _blank |
SiteUrl | Multiple lines of text (plain text) | At version 2023 and above necessary! This field is used to trim links based on the configured Urls. Example: https://contoso.sharepoint.com/sites/hr;https://contoso.sharepoint.com/sites/ap If the configured Url is an index of the current Url, the navigation link will be visible. |
SubCategory | a single line of text | At version 2024 and above necessary for DropDownMenu list! This field is used to build a 3-level dropdown menu. If the Property "Enable SubCategory Field" is disabled, the normal dropdowns are rendered. |
Visibility | People / Groups (Multiple selection) | At version 2026 and above necessary for both Menus, if the "Enable Visibility field" property is activated. Please note to have the additional permission requested approved in your Admin Center. Is used to security trim any links with SharePoint Groups or users. |
Property Name | Description |
|---|---|
Main | |
Enable Menu | Yes/no. |
Enable Visibility Field | Is used to security trim any links with AAD Security Groups, SharePoint Groups or users. Note: Additional permission requested needs to be approved in your Admin Center |
Site URL | Specify the full URL to the Site, serving the List. |
MegaMenu List Name | Enter the display name of the MegaMenu List. |
MegaMenu Position | Top left; Top Placeholder left; Top Placeholder right; Disabled. |
DropDownMenu List Name | Enter the display name of the DropDownMenu List. |
DropDownMenu Source | Current Site;Root site Root Site: grabs the dropdown (horizontal Menu) list from the root site only (and caches it if enabled) Current Site: loads the DropDownMenu List from the current site if available, otherwise it falls back and takes the root site list (or cached list). This enables you to have a separate horizontal menu for each site! |
DropDown Menu Position | Placeholder Top; Above the site (experimental!) |
Enable SubCategory Field | By enabling this property, the DropDown Menu is rendered in a 3-level Menu: MenuItem, Category, Items |
DropDownMenu Spacer | None; Vertical will display vertical spacer between the category titles. |
Placeholder Top CSS | Style the Top Placeholder with additional CSS. |
Options | suitenavplaceholderheight=60px !important;| specifies the very top placeholders height. searchboxtext=yourtext| sets the placeholder text within the searchbox searchboxiconurl=imgUrl| specify a custom magnifying glass Icon set on the right searchbox side. removes default glass. navhaedercolor=color| sets the placholder top color. nokey=1| removes the license section from the settings dialog. searchboxcss=cssstyle| style the serachbox with css. searchboxplaceholdercss=cssstyle| style the searchbox placeholder with css. hidecomponentexclusionlist=listName| specify the list name in the rootSite. List Field Url with type single line of text including SiteUrl dismissing the enabled option: Hide CompositeHeader = Yes |
License Key | Please enter your PayPal "Profile ID" to unlock your WebPart. (Format: I-1A11SSBB2241) |
MegaMenu CSS | |
Hamburger CSS | Style the Hamburger section with additional CSS (optional). |
Categor Menu CSS | Style the Category Menu with additional CSS (optional). |
Category CSS | Style the Category CSS with additional CSS (optional). |
Item CSS | Style the item with additional CSS (optional). |
Item hover CSS | Style the Hover function on Items with additional CSS (optional). |
DropDown CSS | |
Container CSS | Style the Container with additional CSS (optional). |
Menu Title CSS | Style the title with additional CSS (optional). |
Menu Container CSS | Style the Menu Container with additional CSS (optional). |
Item CSS | Style the item with additional CSS (optional). |
Item Hover CSS | Style the hover function on items with additional CSS (optional). |
Spacer CSS | Style the spacer between the DropDown menu main items (optional). |
Caching | |
Config Cache retention time(minutes) | Values above zero (0), will store the configuration on the clients' browser. Reduce API calls to zero! |
List cache retention time(minutes) | Values above zero (0), will store the MegaMenu list content on the clients' browser. Reduce API calls to zero! |
Options | |
Hide CompositeHeader | Yes/no; will hide the composite header of modern pages. |
Horizontal Menu Title Colors | Set each category color separated by a semicolon. Example: Orange;Orange;#5a5a5a;#5a5a5a |
We offer different kinds of license