Mega Menu

This Mega Menu Extension is built do 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.

Use the horizontal Menu as a site related menu with caching options available!

Configuration

Upload the .sppkg file to the AppCatalog an 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 RootSiteCollection and create the below Configuration list called: MegaMenu and set up a couple items.
Back to your RootSiteCollection, 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 NameField TypeValue
Title Change its default requerd to non requiredIs used to set the link alternate text (optional)
Link HyperlinkDescription is used to set alternate text if Title is not used
Category ChoiceEnter your Section names
CategoryOrder NumberEach section (Category field) should have one number
Target Choice_self
_blank

WebPart Properties
Property NameDescription
Main
Enable Menu Yes / No
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;RootSite
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 separate horizontal menu for each site!
DropDownMenu Spacer None;Vertical will display vertical spacer between the category titels.
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 Enter the Product License Key provided by us.
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)
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

Get a license

We offer different kinds of license

  • a PayPal subscription
  • a conservative invoice for a defined time period

  • Office 365

    Paypal

    $ 325 USD - yearly
    SharePoint URL*
    Request an Offer

    Post a comment

    Stan
    01/18/2020 17:14
    Hi Team,

    Amazing Product!
    How do I set the category colors for the horizontal menu?
    Raphael
    01/21/2020 12:18
    Hello Stan,

    we have updated the MegaMenu to have an option available to set each category title color.
    Also individual site based horizontal menus are available now!
    Please update your current installed version with the new package from this site.
    If the options should not be available, please send us your settings.js file located in: rootSitestyle libraryBitalusExtensionsMegaMenusettings.js
    We would modify your configuration file to have these options available.