Menu Manager

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.

Creating a new menu

How to create new menu

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.

To create a new menu:

Step 1: Add a new menu

1. On the Admin sidebar, tap Scandiweb. Then under Navigation, choose Menu Manager.

2. Choose Add New Menu button

3. In the General Information tab, enter the following information:

   1. Menu Title

   2. Menu Identifier

   3. Custom Menu CSS Class (optional)

   4. Menu Status to enabled or disabled

   5. Assign the menu to Store, when you want the menu to be visible.

4. Tap Save and Continue Edit

Step 2: Add assigned menu items

1. Open the Assigned Menu Items tab

2. Choose Add Item, fill in the following information

   1. Enter Menu Item Title that will appear on the storefront

   2. Choose the URL Type: Custom URL, CMS Page or Category. Then choose the path depending on the URL Type you have chosen.

   3. 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.

   4. Set Menu Item Status to Enabled or Disabled.

3. Choose Save

Step 3: Make the menu visible on the storefront

1. On the Admin sidebar, tap Stores. Then under Settings, choose Configuration.

2. Switch to the store view where you want your menu to be visible

3. In the panel on the left, under ScandiPWA choose Content customization.

4. Expand the Header and Menu section.

5. Change the Menu to display to your new menu.

6. When complete, tap Save Config

By default, if nothing is selected under the Menu to Display setting, ScandiPWA 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.

Available CSS classes

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-ItemFigure_type_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.