# 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 <a href="#menumanager-creatinganewmenu" id="menumanager-creatinganewmenu"></a>

{% embed url="<https://youtu.be/UUEIsy3eDyM>" %}
How to create new menu
{% endembed %}

{% hint style="info" %}
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.
{% endhint %}

The default ScandiPWA theme supports only one menu per store.&#x20;

### To create a new menu:

#### Step 1: Add a new menu&#x20;

1. On the Admin sidebar, tap **Scandiweb**. Then under *Navigation*, choose **Menu Manager**.
2. Choose **Add New Menu** button&#x20;
3. In the **General Information** tab, enter the following information:
   1. **Menu Title**&#x20;
   2. **Menu Identifier**&#x20;
   3. **Custom Menu CSS Class** (optional)
   4. **Menu Status** to enabled or disabled&#x20;
   5. Assign the menu to the **Store** where you want the menu to be visible.&#x20;
4. Tap **Save and Continue Edit**

#### Step 2: Add assigned menu items&#x20;

1. Open the **Assigned Menu Items** tab&#x20;
2. Choose **Add Item** and fill in the following information:
   1. Enter the **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.&#x20;
   3. Choose the **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.&#x20;
   4. Set **Menu Item** **Status** to **Enabled** or **Disabled.**&#x20;
3. Choose **Save**

#### Step 3: Make the menu visible on the storefront&#x20;

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. &#x20;

{% hint style="warning" %}
**Caching Note**

The menu will be updated on the front-end immediately after saving, as it is 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 a new cache entry will be stored.
{% endhint %}

## 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 | <p>When applied to the menu item, the menu item gets hidden on the desktop and is rendered on the mobile menu only.</p><p><strong>HINT!</strong> Use this class for the "SHOP ALL CATEGORY" option on mobile.</p> |