Menu Manager
Last updated
Last updated
In ScandiPWA, the default Magento navigation is replaced with the Scandiweb Menu Manager. Menu Manager is a necessary tool that gives additional options for creating a navigation tree.
As a site visitor, you will get convenient navigation. There can be different navigation blocks on the site, if necessary. As a store owner, you are able to create an unlimited number of navigation blocks per website or store, add menu items, set URLs for them, enable/disable, set CSS class, set the order of display.
When creating a new menu, the root menu item should be created in the first place. The following menu item(-s) should be assigned under the root category that you have created.
The default ScandiPWA theme supports only one menu per store.
On the Admin sidebar, tap Scandiweb. Then under Navigation, choose Menu Manager.
Choose Add New Menu button
In the General Information tab, enter the following information:
Menu Title
Menu Identifier
Custom Menu CSS Class (optional)
Menu Status to enabled or disabled
Assign the menu to Store, when you want the menu to be visible.
Tap Save and Continue Edit
Open the Assigned Menu Items tab
Choose Add Item, fill in the following information
Enter Menu Item Title that will appear on the storefront
Choose the URL Type: Custom URL, CMS Page or Category. Then choose the path depending on the URL Type you have chosen.
Choose Parent menu item. NOTE! There can be only one Root menu item in the menu. Other menu items should be at least one lever lower.
Set Open Type to Same Window or New Window
Set Menu Item Status to Enabled or Disabled.
Choose Save
On the Admin sidebar, tap Stores. Then under Settings, choose Configuration.
Switch to the store view where you want your menu to be visible
In the panel on the left, under ScandiPWA choose Content customization.
Expand the Header and Menu section.
Change the Menu to display to your new menu.
When complete, tap Save Config
By default, if nothing is selected under the Menu to Display setting, ScnadiPWA will use the menu with the "new-main-menu" identifier.
Caching Note
The menu will be updated on the Front-End immediately after save as they are part of the ScandiPWA caching solution that will invalidate caching entries for the updated content. No cache flush or any other manual operations are necessary. Content will be visible after page refresh and new cache entry will be stored.
In the menu manager, you can set a specific CSS class to any of your menu items. When a CSS class is applied, the menu items are rendered on the front-end based on the specific style rules that are specified in the code.
Out of the box, you can use the following CSS classes with the ScandiPWA theme:
CSS class | Description |
Menu_HideOnDesktop | When applied to the menu item, the menu item gets hidden on the desktop and is rendered on the mobile menu only. HINT! Use this class for the "SHOP ALL CATEGORY" option on mobile. |