Add your menu with Page Builder
Your new mega menu can be added to your store using BigCommerce's PageBuilder. Drag and drop our Mega Menu widget, customize and publish.
Drag & Drop
Each menu you create in Mega Menu Builder will be available as a separate widget within PageBuilder to drag and drop into place.
Widget Options
These are the available options for customising the look and feel of the menu within PageBuilder.
General
| Setting | Description |
| Theme | Responsive - our responsive mega menu [default] Desktop - our mega menu design on desktop only Mobile - our mega menu design on mobile only None - the app provides only HTML. Use this option to provide your own CSS & JS for the menu |
| Mobile menu breakpoint | Change the width when the mobile menu "hamburger menu" will be replaced by the flyout mega menu on larger devices. |
| Lazy load images | Use the lazysizes library that's included in Cornerstone-based themes to lazy load any images that are in the menu. This can help perceived page load times as mega menu images are de-prioritised. The trade-off is that as we cannot know the size of images there is a flash as they load in when the flyout menu is shown. |
Top Level
Customise the display of the top-level menu items and the top bar.
| Setting | Description |
| Menu background color | Choose color for the main menu bar. |
| Link color | |
| Link hover color | |
| Justify | Align menu to the left, center or right. |
| Text style | Customise font size and text decoration on hover. |
Second Level
Customise the display of the second-level menu items and the flyout
| Setting | Description |
| Menu background color | Choose color for the background to the flyout menu. |
| Link color | |
| Link hover color | |
| Text style | Customise font size and text decoration on hover. |
Third Level
Customise the display of the third-level menu items
| Setting | Description |
| Menu background color | Choose color for the background to the flyout menu. |
| Link color | |
| Link hover color | |
| Text style | Customise font size and text decoration on hover. |
Mobile Menu
| Setting | Description |
| Show breadcrumb | When navigating to a child menu item on mobile, the parent category is shown and can be tapped to navigate to. Disabled: Enabled: |
| Show search box | Disabling will hide the search box from the mobile menu |
| Show account links and currency switcher | Disabling will hide the account links, currency switcher and gift certificates link from the bottom of the mobile menu. |
Keyboard Accessibility
| Setting | Description |
| Enable Keyboard Accessibility | This ensures that the flyout menu is navigable using only a keyboard. We recommend that this is enabled to ensure accessibility compliance. |
Custom Footer HTML
Use this to add a promotion block to the bottom of your flyout menu. It will be shown for every top level menu item's flyout menu.
Custom CSS
Declare any custom css that you want to add to the menu. That can be useful to override styles on specific menu items that you have added a custom class too.