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 Name | Field Type | Value |
|---|---|---|
| Title | Change its default requerd to non required | 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 |
| Property Name | Description |
|---|---|
| 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 |
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. |
| Rob Ulaszek 05/27/2020 13:39 | Is it possible to use this App Extension for Modern sites with SharePoint Server 2019 (on-premises)? |
| Raphael 05/27/2020 13:43 | Rob, yes it is possible to use the Mega Menu for SharePoint 2019 OnPrem. Please use this product page: https://bitalus.com/extensions/wp?q=48&s=o2019 |
| Vincent T Nguyen 01/25/2021 21:44 | Is there a way for me to try out/review these web parts before we purchase them? Our environment is SharePoint Online. Do you have a specific setup for the Online environment? Thank you. Vincent. |
| Raphael 01/26/2021 06:35 | Vincent, yes the SPFx extension can be tested before purchasing. We can send you an evaluation key to unlock the product for your tenant. Can you share your SharePoint Url with us by email? The setup for SharePoint Online is almost the same. Just deploy the solution to all sites. then we do not need to add the solution to each site manually. |
